How to Dynamically Switch Themes in a Blazor Accumulation Chart?

This article demonstrates how to dynamically toggle between light and dark themes in a Accumulation Blazor Chart using a simple button click. This approach enhances user experience by allowing theme customization based on user preferences or system settings.

Dynamically Switch Themes in Accumulation Chart

To apply a theme to the Accumulation Chart, use the Theme property of the SfAccumulationChart component. Below is a sample implementation that toggles between the Material (light) and MaterialDark (dark) themes.

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons

<div style="margin-bottom:15px">
   <SfButton CssClass="e-primary" OnClick="ToggleTheme">
       Toggle Theme (Light / Dark)
   </SfButton>
</div>

<SfAccumulationChart ID="monitored-applications-chart" Theme="@CurrentTheme">
   <AccumulationChartTooltipSettings Enable="true"
                                     Format="<b>${point.x}</b><br/>Application Count: <b>${point.y}</b>" />
   <AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>

   <AccumulationChartSeriesCollection>
       <AccumulationChartSeries DataSource="@AppData" XName="Status" YName="Count"
                                Name="Applications" InnerRadius="0%"
                                Explode="true" ExplodeIndex="0" ExplodeOffset="10%">
           <AccumulationDataLabelSettings Visible="true" Name="Count"
                                          Position="AccumulationLabelPosition.Outside">
           </AccumulationDataLabelSettings>
       </AccumulationChartSeries>
   </AccumulationChartSeriesCollection>
</SfAccumulationChart>

@code {
   public List<ApplicationData> AppData { get; set; }

   // Start with Light theme
   public Theme CurrentTheme { get; set; } = Theme.Material;

   private void ToggleTheme()
   {
       // Switch between Material (light) and MaterialDark (dark)
       CurrentTheme = CurrentTheme == Theme.Material
           ? Theme.MaterialDark
           : Theme.Material;
   }
} 

Output

Live Demo

Explore the working sample here:
Blazor Playground Sample

Conclusion

I hope you enjoyed learning about how to dynamically switch themes in a Blazor Accumulation Chart.

You can refer to our Blazor Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Blazor components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Blazor Chart and other Blazor components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!