Color dont work in styled mode, boost mode and many series

[petrenkonik]

Expected behaviour

Setup styledMode: true, and boost mode
For multy series.
Expected color from css style

Actual behaviour

All color is back.
If use on series css it apply

Live demo with steps to reproduce

jsfiddle

Product version

Highcharts JS v10.3.3

Affected browser(s)

Chrome 111

[petrenkonik]

In boost.src.js:2038
for on series
series.markerGroup have class
highcharts-markers.highcharts-series-0.highcharts-line-series.highcharts-color-0

For many series
series.markerGroup dont have any classes

[karolkolodziej]

Hi @kostuk! Thank you for reporting the issue!

When styledMode is enabled, the series is rendered as an image using WebGL.
Thus you will never be able to apply CSS properties to the series when it is boosted.

[petrenkonik]

Hi @karolkolodziej
You have mistake.
If you will use one series css and styledMode work good
Look second chart
https://jsfiddle.net/1f9xsL2r/

[petrenkonik]

I look code In boost.src.js:2038

 if (chart.styledMode) {
                        fillColor = (s.series.markerGroup &&
                            s.series.markerGroup.getStyle('fill'));
                    }

It is get color from css by .getStyle('fill') and use it in image.
Error in markerGroup have className only of chart with one series. For more series className it empty

[karolkolodziej]

I misunderstood you at first but you are right!
Thank you for the explanation.

[KacperMadej]

As a workaround, you can set allowForce: false.
Demos with the workaround: first, second

[KacperMadej]

Internal note: markerGroup for each series is shared so neither calculating the color in styled mode based on the class names won't work (mainly because there are no class names added at all) nor basing the calculations on the shared entity when trying to access individual properties. Setting the correct class names to get this info will lower the performance (extra DOM's read & write actions) but this is done before any heavy work so it might not be a noticeable decrease in performance.