When styledMode module added, solidgauge doesn't respect colors

[karolkolodziej]

Expected behaviour

Allow setting colour dynamically for solidgauge throughout stops/colorAxis when the styleMode module is added.

Actual behaviour

Styled mode colours (from class .highcharts-color-0) overwrite the ones added by the stops in solidgauge series.

Live demo with steps to reproduce

Demo with the issue Demo without styledMode- works ok

Product version

Highcharts JS v10.3.3 (2023-01-20)

Affected browser(s)

All

[ddragula]

The problem also occurs when styled mode is disabled but CSS styles are still imported (this can be common, for example, in HC Dashboards). This is because the class with color (e.g. highcharts-color-0) is still added to the points.

[TorsteinHonsi]

Suggested offline:

I think the enabled styled mode should result in not adding these class names for points that are to be colored by the color axes etc.

@vazonik Yes I think that makes sense. When a point is subject to coloring by the color axis, there's no need for that class name. This must be checked also for other series types, like heatmap, but since it hasn't been reported there, it probably doesn't apply.

Side note - CSS (even external) takes precedence over attributes, so if we can't make the above solution work, we can set the fill as a style instead: https://jsfiddle.net/highcharts/uypmdcq0/

[sire-sam]

This must be checked also for other series types, like heatmap, but since it hasn't been reported there, it probably doesn't apply.

I’ve noticed a similar issue with the Heatmap series when styled mode is disabled but CSS styles are still imported.

Styled mode colors seem to overwrite those added by colorAxis in Heatmap series, likely due to the same reason mentioned for solid gauge (class name addition for points).

Here’s a JSFiddle demonstrating the issue by only adding the Highcharts CSS file: https://jsfiddle.net/sire_sam/wmtexz7u/4/