Blazor Chart Wizard - Fast, Guided Chart Configuration
- Quickly build charts with guided steps for selecting series types, binding data, and applying formatting.
- Configure all chart elements including axes, series, legends, tooltips, and export options from a unified and intuitive interface.
- Generate production‑ready chart configurations designed with built‑in accessibility features and responsive behavior.
Trusted by the world’s leading companies
Overview
The Blazor Chart Wizard delivers a streamlined, guiding interface for building charts with ease and precision. It walks users through selecting chart types, mapping data fields to series, applying formatting and styles, and configuring interaction, exporting, and print options. Designed to support both beginners and advanced users, it offers intuitive guidance for fine‑grained control, enabling the creation of fully customized, production‑ready visualizations.
Why choose the Syncfusion Essential Studio® Blazor Chart Wizard?
Guided configuration
The Chart Wizard streamlines chart setup with a clear, step‑by‑step workflow that accelerates creation and helps prevent configuration errors.
Rich formatting
Effortlessly apply themes, color palettes, data labels, markers, and series‑level styling without writing code.
Data binding
Bind charts to in-memory collections, remote data sources, or preprocessed datasets, and quickly map fields to series.
Blazor Chart Wizard code example
The following example demonstrates a typical Chart Wizard workflow: selecting a chart type (e.g., column, line, area, pie), binding the chart to a dataset, mapping x- and y-fields to series. The example also shows how to persist the Chart Wizard configuration and how to programmatically load and apply saved templates.
@using Syncfusion.Blazor.ChartWizard
<SfChartWizard Width="100%">
<ChartSettings DataSource="@OlympicsDataSource"
CategoryFields="@categories"
SeriesType="ChartWizardSeriesType.Bar"
SeriesFields="@chartSeries">
</ChartSettings>
</SfChartWizard>
@code {
private readonly List<string> chartSeries = new() { "Gold", "Silver", "Bronze" };
private readonly List<string> categories = new() { "Country", "CountryCode" };
private readonly List<OlympicsData> OlympicsDataSource = new()
{
new OlympicsData { Country = "USA", CountryCode = "USA", Gold = 40, Silver = 44, Bronze = 42 },
new OlympicsData { Country = "China", CountryCode = "CHN", Gold = 40, Silver = 27, Bronze = 24 },
new OlympicsData { Country = "Great Britain", CountryCode = "GBR", Gold = 14, Silver = 22, Bronze = 29 },
new OlympicsData { Country = "France", CountryCode = "FRA", Gold = 16, Silver = 26, Bronze = 22 },
new OlympicsData { Country = "Australia", CountryCode = "AUS", Gold = 18, Silver = 19, Bronze = 16 }
};
public class OlympicsData
{
public string? Country { get; set; }
public string? CountryCode { get; set; }
public int Gold { get; set; }
public int Silver { get; set; }
public int Bronze { get; set; }
}
}
ChartSettings
The ChartSettings component in the Chart Wizard allows you to configure core data and visualization options:
- SeriesType: Specifies the chart type (line, column, bar, area, pie, scatter, etc.).
- DataSource: Sets the chart’s data source.
- CategoryFields: Fields used as categories.
- SeriesFields: Fields plotted as series.
Chart, data, and format options
- Chart type
- Data binding
- Series options
- Axes
- Data labels
- Colors
- Tooltips
- Legends


Print and export
- Export as PNG, JPEG, SVG, PDF.
- Print support.
- Batch export.
- Style preservation.
Save and load
- SaveChart: Serializes chart wizard state.
- LoadChartAsync: Loads saved JSON configuration.

Accessibility
Keyboard navigation
Blazor Chart Wizard ensures that every element is keyboard accessible. Major features like selection, highlight, tooltip, legend collapse and zooming and panning can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component.
Screen reader
Blazor Chart Wizard views have complete WAI-ARIA accessibility support. This UI includes high-contrast visual elements, helping people with visual impairments have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers.
Right to left (RTL)
Right-to-left rendering allows displaying the text and layout of the Blazor Chart Wizard from right to left. This improves the user experience and accessibility for RTL languages.
Not sure how to create your first Blazor Chart Wizard? Our documentation can help.
I’d love to read it nowBlazor Components – 145+ UI and DataViz Components
Our Customers Love Us
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.