Colours get ignored when having a chart in Highcharts dashboard

[diy4all]

Same chart is working as expected with correct colours outside the Dashboard-Framework.
Is there a kind of global override?
https://jsfiddle.net/diy4all/eq23t78d/

[jakub.s]

Hi,

You're absolutely right. When you're creating a chart with Highcharts, the styledMode is disabled by default, which is not the case for Dashboards.

You can of course turn off the styledMode if you want (https://api.highcharts.com/highcharts/chart.styledMode), but unless you change it you need to keep in mind that it's turned on.

With the styledMode changing series.color will not work. As you can read in the API (https://api.highcharts.com/highcharts/p ... ries.color):

In styled mode, the color can be defined by the colorIndex option. Also, the series color can be set with the .highcharts-series, .highcharts-color-{n}, .highcharts-{type}-series or .highcharts-series-{n} class, or individual classes given by the className option.

I've updated your demo and added 2 colors via CSS and the colorIndex property: https://jsfiddle.net/BlackLabel/h1dtaLj8/

Please check this out and let me know if it works for you. Do not hesitate to ask in case my explanation was not clear.

Best regards!

[diy4all]

Wow! Thank you for your quick reply and offering a solution which works excellent for me.
Very nice to have now an understanding of the behaviour.

[s5c]

I am evaluating and testing the Dashboard functionality and am trying to implement a solidgauge within a cell. It works fine, however, the path fill color set from yAxis stops array gets overridden by the class .highcharts-color-0. Could you help with the correct options for the solidgauge within a Dashboard not ignoring the stop colors?

[jakub.s]

Hi,

Thanks for the question and apologies for the late response (there were a few technical problems with the Highcharts Forum).

You're absolutely right - there is an issue with this. However, this stems from Highcharts, not from Dashboards.

Here's a simple workaround that you can use: https://jsfiddle.net/BlackLabel/gL8q1cyf/

Just past the IIFE function on top to your solution.

---

It has already been reported on the Highcharts repository: https://github.com/highcharts/highcharts/issues/18547

The problem stems from the fact that styled mode colors (from class .highcharts-color-0) overwrite the ones added by the stops in solidgauge series.

Please let me know if that solves your problem.

Best regards!

[s5c]

Thank you. The problem was indeed resolved by your solution. I am facing a similar issue with pie charts within the Dashboard and colors set. Would there be a similar solution to this problem?

[dawid.d]

Hello s5c,

Welcome to our forum and thanks for contacting us with your question!

You're right, this problem also results from the fact that the colors of the points (although in this case also the connectors and halos) are taken from the imported css file instead of directly assigning the style from the code (it's a bug when the styledMode option is disabled).

Workaround in this case may look like this: https://jsfiddle.net/BlackLabel/1rc5agfz/

Let me know if it meets your expectations so far.
Best regards

[s5c]

Thank you for resolving this issue. Do you have a similar fix for a 3D pie chart?

[dawid.d]

Hi, yes!

In this case, the solution is also to remove color classes from SVG elements. Also note that in the css file I changed the width of the element outlines to 0.

Demo: https://jsfiddle.net/BlackLabel/m7d2L4yr/

Best regards!