Opened 6 years ago

Closed 5 years ago

#16911 closed enhancement (fixed)

Add API for setting shape-rendering hints to get rid of spurious edges in bottom area

Reported by: stelian56 Owned by: cjolif
Priority: undecided Milestone: 1.10
Component: Charting Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:


The code below produces an area chart. Color from the top area spills onto the bottom area along the edges.

<script type="text/javascript" src="" data-dojo-config="async:true,parseOnLoad:true,locale:'en-us'"></script>
<script type="text/javascript">
require(["dojox/charting/Chart", "dojox/charting/plot2d/Areas", "dojox/charting/axis2d/Default"],
  function(Chart, Areas) {
    var chart = Chart("MyChart");
    chart.addPlot("default", { type: "Areas" });
    chart.addSeries("Series1", [1, 1], {fill: "white"});
    chart.addSeries("Series2", [2, 2], {fill: "blue"});
    chart.addAxis("x", {min: 0.5, max: 2.5});
    chart.addAxis("y", {vertical: true, includeZero: true});
<div id="MyChart" style="width:400px;height:300px"></div>

Change History (7)

comment:1 Changed 6 years ago by ben hockey

Component: GeneralCharting
Owner: set to Eugene Lazutkin

comment:2 Changed 6 years ago by cjolif

Owner: changed from Eugene Lazutkin to cjolif
Status: newassigned

I don't think charting can do much here, even gfx, this is probably an effect of the rendering antialiasing. If you are in SVG and I suspect you are you can do:

chart.surface.rawNode.setAttribute("shape-rendering", "crispEdges");

it should get rid of the effect?

comment:3 Changed 6 years ago by stelian56

The spurious edges flank the bottom area in both SVG and VML. It happens in Firefox, Chrome and IE8 alike.

If there is a straightforward cure, why not apply it at the API level? To save the hassle for developers. Most users would have antialiasing turned on anyway.

comment:4 Changed 6 years ago by cjolif

Milestone: tbd1.10

I guess people that do not have chart like this one might not want to have the crispEdges property enabled by default? In any case this is hard to force that in a patch release better to wait for a full release.

comment:5 Changed 5 years ago by cjolif

We actually can't force crispEdges on all chart plots and in particular Area because if the shape is not formed of vertical/horizontal lines this will gives a bad result. The solution at library level is then to do it only for certain plots (columns, bars, axis) and make sure we have an API to do that more easily than today for the other type of plots for those who needs it.

comment:6 Changed 5 years ago by cjolif

Summary: Spurious edges in bottom areaAdd API for setting shape-rendering hints to get rid of spurious edges in bottom area
Type: defectenhancement

comment:7 Changed 5 years ago by Christophe Jolif <cjolif@…>

Resolution: fixed
Status: assignedclosed

In ec234f225e7c92ef66c72fc467e78ca693aff1ad/dojox:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 
Note: See TracTickets for help on using tickets.