Dark-light mode toggle issue with charts

[Paolo]

Hello.

We own a license for an older version of Kendo UI for jQuery, and we are now testing the latest release (demo version) to decide if we should upgrade.

We have implemented a light/dark/auto mode switch for our application. For Kendo theme, this is achieved by changing the name of the css loaded by the page.

Everything works fine for all widgets except charts. When mode is changed, for example switching from light to dark, all axis labels, lines, background, etc stay the same (light theme). If the page is reloaded (and chart recreated), then the correct mode is applied.

Attached you will find three images showing the behavior: initial light mode, after switch to dark mode, after page reload.

Given for our application reloading the page is not an option, is there a fix or workaround for this behavior?
Calling the redraw method doesn't help.

Thank you.

[Nikolay]

Hi Paolo,

The Chart must be reinitialized to update its series based on the changed theme. 

When you call the function that updates the theme stylesheet, reload the page to reload the Chart, for example:

location.reload();

Regards,

Nikolay

[Paolo]

Unfortunately what you suggest is not possible. Our application is a complex Single Page Application and reloading the page is not an option.

[Paolo]

If adding a way to redraw the chart updating che styles is not possible for you, I'd suggest at least to add class name on all elements of the chart (horizontal and vertical ticks, labels, lines, etc). This would make it possible to override the styling.

For example, as a partial workaround we made the chart background transparent and added this rule in our stylesheet:

.k-chart text {
    fill: var(--bs-body-color);
}

In this way, when the dark/light mode is switched and that variable is changed, at least the chart labels get the correct color. Having the same for all other parts of the chart would help, id the chart component can't be improved in a better way.