Chart: dynamic colors with css variables

[ICT]

Hello,

I am trying to create an application with dynamic themes (light and dark) and I would like to change the theme on the fly.

With all the kendo components I have no problems but I can't do it with the charts.

I noticed that to see the styles applied it is necessary to refresh the page (you notice by changing something in the code).
Is it possible in some way to have the styles applied to the chart?

here my stackbliz test app 

https://stackblitz.com/edit/angular-saj2p6?file=app/app.component.ts

 

 

Thanks

[Yanmario]

Hi Benedetta,

Thank you for the provided demo.

Indeed the described behavior is expected as the Chart would need to be redrawn to apply the new background color. This also explains why when changing the code in StackBlitz redraws the Chart and shows the green color.

In cases, as such the background color would need to change with a property like chartArea as demonstrated in the following demo:

https://stackblitz.com/edit/angular-saj2p6-predag?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Yanmario
Progress Telerik

[ICT]

Hi Yanmario,

This works perfectly with the background but not with the other css variables of the chart.

It seems that the chart does not completely redraw by reading the modified variables again.

I need a way to be able to modify CSS variables (background, label texts, axis color....) and have them applied to the chart.

 

Here a SB of what i mean. 

https://stackblitz.com/edit/angular-saj2p6-ylyd2f?file=app%2Fapp.component.ts

Thanks,

B

 

[Yanmario]

Hi Benedetta,

The other variables of the Chart component can be styled as follows:

Labels - https://www.telerik.com/kendo-angular-ui/components/charts/elements/labels/#toc-setting-the-appearance

Axis color - https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesItemComponent/#toc-color

 <kendo-chart-series-item [color]="seriesItemColor" [data]="data">
...
 seriesItemColor = 'purple';

I hope this helps.

Regards,
Yanmario
Progress Telerik