Strokes extend significantly above data points in noisy data

[BernardCandy]

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.

[danvk]

I read this as a request to be able to set lineJoin and miterLimit on the canvas, which is reasonable.

[BernardCandy]

Thanks danvk. I agree that the ability to set lineJoin and miterLimit would get around this problem. Any idea when that might become possible?

[ezramorris]

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:

1. The browser window is resized, demonstrating the change in display.
2. Two ranges of data are selected on the graph, which zooms to it and shows how it should be displayed.
3. The browser window is zoomed in to 100%, which improves the display, but the strokes are still excessive.

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:

• Opera 58.0.3135.127, Windows 10
• Firefox 66.0.3, Windows 10
• Chrome 73.0.3683.103, Windows 10
• Edge 42.17134.1.0, Windows 10
• Firefox 60.6.1, Debian 9.8
• Chromium 73.0.3683.75, Debian 9.8