Open BernardCandy opened 6 years ago
I read this as a request to be able to set lineJoin and miterLimit on the canvas, which is reasonable.
Thanks danvk. I agree that the ability to set lineJoin and miterLimit would get around this problem. Any idea when that might become possible?
I have seen a more severe effect of what I believe is the same issue. I'm not quite sure whether it's an issue with this library, or generally with a lot of browser rendering engines.
I have some generally flat data, but it is slightly noisy. At different browser zoom levels, the extent of the overshoot varies. Also, picking a particularly poor browser zoom level, then zooming into the graph using the canvas, or resizing the graph, makes it better.
The following gif demonstrates the issue. The browser zoom level is set to 90% and the following is performed:
As a workaround I added ctx.lineJoin = "round";
into DygraphCanvasRenderer._drawSeries after var ctx = e.drawingContext;
(line 1247 in 2.1.0). This improves the display in all cases:
I tested and observed it on the following browsers:
The strokes between data points are sometimes drawn significantly above the data points.
The effect is most pronounced when a data point represents a spike in the data.
The problem is illustrated in this jsfiddle: https://jsfiddle.net/eM2Mg/10738/
In this example, all of the data points are below the horizontal red line.
For the first and steepest peak the strokes are not drawn above the data point at all.
For the second peak the green strokes are drawn significantly above the red line.
For the third peaks the green strokes are drawn slightly above the red line.
For the fourth peak the strokes are drawn above the data point but below the red line.
This problem has been noted in both Chrome and IE on Windows 7.