We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfChart does not respect change of css file

I have a simple js function to switch between dark and light material stylesheets.

In _Host.cshtml

<link id="theme" rel='nofollow' href="css/material.css" rel="stylesheet" />

In app.js

function toggleTheme() {

    // Obtains the <link> element with id="theme".

    var theme = document.getElementById('theme');

    // Change the value of rel='nofollow' href attribute

    // to change the css sheet.

    if (theme.getAttribute('rel='nofollow' href') == 'css/material.css') {

        theme.setAttribute('rel='nofollow' href', 'css/materialdark.css');

    } else {

        theme.setAttribute('rel='nofollow' href', 'css/material.css');



And in MainLayout.razor

A simple checkbox with: <input type="checkbox" @onchange="ToggleTheme">

And a calling for the js function when clicked:

    private async void ToggleTheme()


        await JSRuntime.InvokeAsync<object>("toggleTheme");


My problem is that even though I change out the whole stylesheet SfChart and SfAccumulationChart refuse to follow the styling, while SfGrid changes styles right away and respect the current stylesheet in use.

1 Reply

GV Gopalakrishnan Veeraraghavan Syncfusion Team April 14, 2023 01:30 PM UTC

Hi Remi,

We have analyzed your query. Chart and Accumulation Chart don’t support css, we suggest you to toggle the theme through Theme property. To achieve this, we will create a button that toggles the theme. We have attached a sample and screenshot for your reference. Please check with the below code snippet.

<SfChart Theme="ThemeChange">


        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.MultiColoredArea">


                <ChartSegment Value="2007" Color="blue" />

                <ChartSegment Value="2009" Color="red" />

                <ChartSegment Color="green"></ChartSegment>





Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChangeThemeColor-1886700491.zip


Kindly revert us if you have any other concerns.


Gopalakrishnan Veeraraghavan

Live Chat Icon For mobile
Up arrow icon