highcharts / highcharts

Highcharts JS, the JavaScript charting framework
https://www.highcharts.com
Other
11.87k stars 3.54k forks source link

With boosted series, clipmasks are not updated when plot height changes if chart was not initialized with disjoint y axes #21186

Open javolio opened 1 month ago

javolio commented 1 month ago

Expected behaviour

Given a chart that is using the boost module and has several boosted series all on a single y axis, if the chart is updated so that the series are associated with distinct vertically-spaced y axes and the chart's height is increased, the series should all be rendered appropriately within their axes.

Actual behaviour

When such updates are performed, the series are clipped with a clipmask that is associated with the original chart height. Some series may be entirely hidden, and some may be cut off.

image

This happens regardless of whether the update to chart.height happens in the same call to update or in a subsequent one.

This only requires at least one series to be boosted, and the impacted (clipped) series may be boosted or not.

There are two notablee situations that prevent the bug: • If the chart itself is boosted (because all series are boosted and boost.allowForce is true) • If the chart is initialized with split axes

Live demo with steps to reproduce

https://jsfiddle.net/u819kfz6/3/ Click either the first and second button or just the third button to see the effects of the described updates.

https://jsfiddle.net/yf8avd5z/1/ Here, we see that unboosted series will also be clipped.

https://jsfiddle.net/tdz1wh6r/1/ In this demo, we see that setting boost.allowForce to true also prevents the bug, but only if all series are boosted.

https://jsfiddle.net/2fg5std3/1/ In this demo, we see that if the chart is initialized with split axes, it does not encounter this problem.

Product version

Highcharts JS v11.4.1 (2024-04-04)

Affected browser(s)

Confirmed in Chrome and Firefox

bm64 commented 3 weeks ago

Hello @javolio

Thanks for sharing all your findings about the bug, that's really helpful. It looks like it used to work correctly back in v11.3.0: https://jsfiddle.net/BlackLabel/yqL63b74/

Internal note: Bisected to: ed32adb20b