Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 27 Jun 2025 10:20 by ADMIN
Rami
Created on: 23 Jun 2025 10:06
Category: Charts
Type: Feature Request
0
Chart CSS colours should be changeable at runtime

In the docs https://www.telerik.com/blazor-ui/documentation/components/chart/overview#styling-with-css-variables there is an example on using CSS variables to set colours of the Chart component. And yes, if I set the --kendo-chart-bg CSS variable to some colour, the chart background is coloured with it. But, I can't change the colour at runtime, for example for switching between light and dark themes at user request.

But, shouldn't this be possible as the SVG is rendered inline? I see the chart being rendered as elements like below where the fill propertys value comes from the --kendo-chart-bg variable. But if the fill was instead set to "var(--kendo-chart-bg)" I would be able to change --kendo-chart-bg at runtime and the chart would reflect the change without needing to be refreshed separately? Same should go for all the text and series' colours.

<svg>
<g>
<path d="M0 0 L 400 0 400 240 0 240Z" stroke="none" fill="#0f0"></path>
</g>
</svg>

I also saw this, but I think this is before you added the CSS colouring? https://feedback.telerik.com/blazor/1496389-using-custom-themes-changing-at-runtime-does-not-change-the-chart-component-style


5 comments
ADMIN
Dimo
Posted on: 27 Jun 2025 10:20

Hello Rami,

An SVG image may consist of markup, but it's still an image. Calculating and generating SVG images is different than rendering "regular" HTML. Moreover, the Chart can also render as a <canvas>, which is even closer to the classic perception of an image.

With regard to CSS variables and this example, the Chart reads all its required CSS variables and applicable styles on initialization. Then, the Chart uses the computed style values and not the variables, for example, for its series colors. If the variable values in the external CSS code change, the Chart is not aware of that.

Setting a CSS variable value inline inside the Chart configuration works, because the variable name itself ends up in the rendered SVG markup. But that's a different approach, which we don't currently use.

<ChartSeries Color="var(--some-CSS-var)" />

Technically, it's possible to:

  • Fork the Chart logic, so that it renders CSS variable names inline in the <svg> markup. This is not applicable for the <canvas> rendering mode.
  • Implement a style observer, which polls for CSS value changes at some interval. This will work for both SVG and Canvas modes, but may have performance implications.

Neither option is particularly elegant, but we now have an internal task for a future research about this, so I will mark this public item as Unplanned.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Rami
Posted on: 26 Jun 2025 06:04

Hello Dimo, 

I'm curious as to why you say that "the Chart renders as an image"? If you open the REPL you linked below and look at the source with developer tools, you can see the chart is an SVG tag. Also, if I, at runtime, in an app that does the theme changing like I described with the JS call, change the fill properties to use the var() notation, I can see the colours changing for the chart if I change the theme.

ADMIN
Dimo
Posted on: 26 Jun 2025 05:50

Hello Rami,

The comparison between the Chart and the other Telerik Blazor components is not justified in this case, for two reasons:

  • The Chart renders as an image, so recreating it is resource intensive. It's better to leave the decision when to do that to the application and the developer.
  • The Chart cannot detect when an external CSS rule is modified.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Rami
Posted on: 26 Jun 2025 03:57

Hi Dimo,

calling that extra method is exactly what I'm trying to avoid. No other component in the current apps in production that I'm overseeing need an extraneous Refresh call, not even (most? all?) components from Telerik.

You see, we currently have, in the CSS file something like below (with many more colours of course)

:root {

--foreground-color: #FBFBFB;

}

[data-theme="dark"] {
--foreground-color: #0B0B0B;

}

then that var goes into classes which style different components' "foreground" color with var(--foreground-color). Then in a .js file we have the below code and then calling that from the C# side with "await JS.InvokeVoidAsync("setTheme", "dark");" changes the CSS colour vars which in turn changes the appearance of the whole page. And this is what I'm looking for to achieve with the Chart component aswell. And which should be possible if the fill property would be written with "var(xxx)" like I described in my opening post

window.setTheme = (theme) => {

document.documentElement.setAttribute('data-theme', theme);
};
ADMIN
Dimo
Posted on: 25 Jun 2025 08:24

Hi Rami,

Dynamic Chart colors that change at runtime are already supported. You need to call the Chart Refresh() method for the changes to kick in:

https://blazorrepl.telerik.com/mfEAcpEW23NhSQ4C36

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category