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; }
}
}
Chart Settings
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.
Guided chart configuration
The Chart Wizard guides you through the most important choices — chart type, data binding, and formatting — so you can build a chart that looks right and reads clearly on the first try. You can configure the following options:
- Chart type
- Data binding
- Series options
- Axes
- Data labels
- Colors
- Tooltips
- Legends


Print and export
Generate printable and downloadable chart outputs with consistent formatting in the Chart Wizard.
- Export as PNG, JPEG, SVG, PDF.
- Print support.
- Batch export.
- Style preservation.
Save and load
Persist and restore chart configurations across different sessions in the Chart Wizard using JSON serialization.
- 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?
I’d love to read it nowBlazor Components – 145+ UI and DataViz Components
Build Document Workflows in Blazor
Integrate a powerful PDF Viewer, rich DOCX Editor, and full‑featured Spreadsheet Editor into your Blazor applications, alongside robust document processing libraries, to create smooth document experiences. Empower users to work with documents interactively while developers automate processing behind the scenes.
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.