Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted 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?

Blazor Chart Wizard Guided Configuration image

Guided configuration

The Chart Wizard streamlines chart setup with a clear, step‑by‑step workflow that accelerates creation and helps prevent configuration errors.

Blazor Chart Wizard Rich Formatting image

Rich formatting

Effortlessly apply themes, color palettes, data labels, markers, and series‑level styling without writing code.

Blazor Chart Wizard Data Driven image

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

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

Chart, data, and format options


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.

Save and load


Accessibility

Blazor Chart Wizard Keyboard Navigation image

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.

Blazor Chart Wizard Screen Reader And Wai Aria Support image

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.

Blazor Chart Wizard Right To Left image

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.



Struggling to decide on the right product?

Our comprehensive competitor comparison of Blazor components will guide you to the perfect choice.

tick-mark 145+ UI components
tick-mark 1200+ interactive Blazor demos
tick-mark 3.9M+ downloads
competitive-banner-FT-image

Blazor Components – 145+ UI and DataViz Components

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.
Here are some of their experiences.

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Read Our Customer Stories


Rated by users across the globe

Transform your applications today by downloading our free evaluation version
Download Free Trial No credit card required.

Syncfusion Blazor Chart Wizard resources

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.

Up arrow icon