SfChart does not respect change of css file

[Remi Vandemir]

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.

[Gopalakrishnan Veeraraghavan]

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">

 <ChartSeriesCollection>

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

            <ChartSegments>

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

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

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

            </ChartSegments>

        </ChartSeries>

   </ChartSeriesCollection>

</SfChart>

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

Screenshot:

Kindly revert us if you have any other concerns.

Regards,

Gopalakrishnan Veeraraghavan