ZukaBriek
Posts: 9
Joined: Fri May 17, 2024 8:09 am

Light theme override plot bands color

Hi I have a chart with plot bands which have a colour but when I put the light theme on my dashboard the dashboard light theme override the plot band's colour.
User avatar
dawid.d
Site Moderator
Posts: 1153
Joined: Thu Oct 06, 2022 11:31 am

Re: Light theme override plot bands color

Hello,

Thanks for the question!

Can you send a demo of your case, made in e.g. in JSFiddle? This shouldn't be a complicated problem, but it depends on your use case.

Thanks!
Dawid Draguła
Highcharts Developer
ZukaBriek
Posts: 9
Joined: Fri May 17, 2024 8:09 am

Re: Light theme override plot bands color

Here you have screenshots from my code and the result that I have.

1st screen : the code of a plotband's code, you can see the color attribute
2nd screen : the result of my plotbands they are light gray but they should be blue

I have this issus only since have setup the white theme of highcharts dashboard.
Attachments
Capture d’écran du 2024-06-18 15-22-23.png
Capture d’écran du 2024-06-18 15-22-23.png (68.8 KiB) Viewed 6515 times
Capture d’écran du 2024-06-18 15-23-05.png
Capture d’écran du 2024-06-18 15-23-05.png (27.65 KiB) Viewed 6515 times
User avatar
dawid.d
Site Moderator
Posts: 1153
Joined: Thu Oct 06, 2022 11:31 am

Re: Light theme override plot bands color

Highcharts Dashboards renders charts with styled mode enabled by default, i.e. it prefers CSS settings. See the demo below on how to set default colors for plotbands for different themes.

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

Hope it helps!
Dawid Draguła
Highcharts Developer
ZukaBriek
Posts: 9
Joined: Fri May 17, 2024 8:09 am

Re: Light theme override plot bands color

I have always this issue I've fixed it with a css styling but now I want to have multiple plotbands with differents colors, so the problem reappear. I've already try to apply chart.styledMode: false but it didn't worked. Do you have a solution ?
User avatar
dawid.d
Site Moderator
Posts: 1153
Joined: Thu Oct 06, 2022 11:31 am

Re: Light theme override plot bands color

Hi,

Did you also remember to remove the highcharts.css style import?

We have noticed that the default enabling of styled mode is causing issues for users who previously used standalone Highcharts charts without it. For this reason, styled mode will be disabled by default in the new version.

Best regards
Dawid Draguła
Highcharts Developer
User avatar
dawid.d
Site Moderator
Posts: 1153
Joined: Thu Oct 06, 2022 11:31 am

Re: Light theme override plot bands color

Hi,

After updating Highcharts Dashboards to version 3.0.0, `styledMode` is now disabled by default for the Highcharts Component. For those of you who wish to keep using `styledMode`, you can enable it in the settings with the following code in your Highcharts Component options:

Code: Select all

{
  chartOptions: {
    chart: {
      styledMode: true
    }
  }
}

If you prefer to keep it disabled, make sure that you do not import the `highcharts.css` file to avoid any unwanted styling effects.

Best regards,
Dawid Draguła
Highcharts Developer

Return to “Highcharts Dashboards”