Completed
Last Updated: 17 Nov 2023 07:06 by Haribabu
Release 2.21.1
Don
Created on: 23 Nov 2020 16:11
Category: Charts
Type: Bug Report
1
Using Custom Themes Changing at Runtime Does not change the Chart Component Style

Our Site supports multiple themes that we have built using the SASS Theme Builder. For all Telerik Components we have used so far the theme changes on them as expected when using the example found here (Change Theme at Runtime). The problem seems to be the chart component will not adhere to the newly applied theme after its initial load. Seems like this is because it is shown as an SVG with hardcoded attributes on the element. Is there a workaround for this (other than reloading the components entirely)?

 

Before & After Theme Change:

2 comments
Haribabu
Posted on: 17 Nov 2023 07:06

i am also facing same issue. using following https://docs.telerik.com/blazor-ui/knowledge-base/change-theme-runtime to switch one theme to another theme and working for all controls except Telerik Chart. 

for telerik chart theme updating when refresh or rerender the chart manually . please advice how to resolve the issue.

my theme update button at mainlayout and chart is there in child component 

 

ADMIN
Stamo Gochev
Posted on: 30 Nov 2020 06:15

Hello Don,

Changing the chart theme requires additional changes as it is rendered as SVG/canvas and its colors need to be obtained explicitly, which is not the case with other components that rely on HTML/CSS. 

What I can suggest as a workaround is to use a flag that signals whether or not the theme has been changed and initialize the chart again:

@if (themeIsReset) 
{
	<TelerikChart ...>
}

Meanwhile, I will log an issue so that the "Refresh" method redraws the chart with the new theme settings.

Regards,
Stamo Gochev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.