Line and shadow issue when points have same `y` value and `shadow` is enabled

[jedrzejruta]

Expected behaviour

Line is rendered on the chart as well as the shadow

Actual behaviour

The line between points isn't rendered, when all points have same y value

Live demo with steps to reproduce

https://jsfiddle.net/BlackLabel/t6hypbn7/
Switch shadow to false, the line will render properly

Product version

since Higcharts v11.0.0

Affected browser(s)

Google Chrome 113.0.5672.129
Microsoft Edge 114.0.1823.37
Firefox 113.0.2 (line is rendered, the shadow isn't)
Safari on iOS 16.5

[karolkolodziej]

Internal note:
Regression after: #18640 Looks like a known issue - SO.
@TorsteinHonsi

[TorsteinHonsi]

It also applies to vertical lines: https://jsfiddle.net/r3cd7o52/

[TorsteinHonsi]

Simplified pure SVG demo: https://jsfiddle.net/highcharts/206cs9g5/ . If we rename the id of the filter, the lines emerge.

[TorsteinHonsi]

@jedrzejruta Adding filterUnits to the filter seems to fix the issue. Explained in https://stackoverflow.com/questions/17883655/svg-shadow-cut-off.

To use it in the attributes, we also need to make it part of the SVGAttributes type definition, and add it to AST.allowedAttributes.

The only concern is about the performance. Since this filter is used by the tooltip, there will be a lot of redrawing going on if we expand the redraw region to the whole chart. If that becomes a problem, one solution could be to have separate filters for the tooltip and the series, because the tooltip doesn't need this fix. Any thoughts are welcome.

[jedrzejruta]

@TorsteinHonsi Based on your suggestions, I've implemented these changes locally and tried to spot a visual degrade in performance, but couldn't notice them with bare eyes. Demo used for visual comparison with multiple points: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series

If the performance is in concern, shadows on chart as well as legend and dataLabels don't require the fix, since only series are affected by this issue.

[TorsteinHonsi]

@jedrzejruta

If the performance is in concern, shadows on chart as well as legend and dataLabels don't require the fix, since only series are affected by this issue.

Yes, and most notably the tooltip doesn't require the fix. The tooltip is most prone to performance degradation since there is a lot of animation and redrawing going on with that.

tried to spot a visual degrade in performance, but couldn't notice them with bare eyes

Me neither. But it may be visible on older systems, or older phones etc.

I think we shouldn't risk a degradation. What I suggest is to make a shadow option for filterUnits, and we use that when we apply the shadow for the series. So if options.shadow is true, we must call .shadow() with { filterUnits: 'userSpaceOnUse' }, and if it's an object, we must merge it with { filterUnits: 'userSpaceOnUse' }.

[jedrzejruta]

@TorsteinHonsi Agreed, it seems to be the most reasonable approach; I'll get right to it as soon as possible.