Still Building Custom Chart Builders? Build Runtime Charts with Blazor Chart Wizard

TL;DR: Building configurable dashboards usually means creating custom chart builders, field selectors, and persistence logic. Learn how the new Blazor Chart Wizard eliminates that work by letting users configure, save, and export charts directly at runtime.

A dashboard that starts with a simple column chart rarely stays that way.

Business users eventually ask to switch chart types, compare different metrics, save personalized layouts, and export visualizations without waiting for another development cycle.

Supporting these requests often requires developers to build configuration panels, field selectors, chart customization interfaces, persistence mechanisms, and export workflows. In many projects, maintaining the chart configuration experience becomes almost as much work as building the dashboard itself.

The Syncfusion^® Blazor Chart Wizard, a new component introduced in Essential Studio^® 2026 Volume 2 release, takes a different approach.

Instead of developers defining every chart configuration at design time, Chart Wizard provides a guided runtime experience that allows users to create, customize, save, restore, print, and export charts directly within a Blazor application.

In this article, you’ll build an Olympic medal dashboard using the Chart Wizard component. Along the way, you’ll learn how to:

• Bind business data to Chart Wizard
• Enable runtime chart customization
• Allow users to save and restore chart layouts
• Configure export functionality
• Understand when Chart Wizard is a better choice than a traditional chart component

By the end, you’ll have a practical understanding of how Chart Wizard can reduce development effort while delivering more flexibility to end users.

Why not just use Syncfusion Chart?

Many Blazor applications already use the SfChart component to render charts. So why introduce another charting component? The answer comes down to who controls the visualization.

With the standard chart component, developers define:

• Chart type
• Series configuration
• Axis settings
• Data mappings
• Styling options

Users interact with the finished chart, but typically cannot modify its structure without changes to the application.

When should you use Chart Wizard?

A standard chart component works well when developers control every aspect of the visualization.

Our Blazor Chart Wizard shines when users need flexibility after deployment.

Scenario	Standard Chart	Chart Wizard
Fixed chart configuration	Yes	No
Users switch chart types	No	Yes
Runtime field mapping	No	Yes
Dashboard personalization	No	Yes
Save and restore chart layouts	No	Yes
Lightweight visualization only	Yes	No

Think of Chart Wizard as a chart-authoring experience rather than a chart control.

What you will build

The completed sample includes:

• An SfChartWizard component.
• Medal data from the Paris 2024 Olympic Games.
• Runtime chart configuration.
• Chart layout persistence using serialization.
• Built-in export capabilities.

The result is a dashboard where users can experiment with visualizations without requiring application updates.

Interactive Chart Wizard Visualization of Paris 2024 Olympic Medal Standings

How Chart Wizard fits into a dashboard

In a typical analytics solution, your application remains responsible for retrieving, securing, and validating data.

Chart Wizard sits on top of that data and provides a user-friendly configuration layer.

                   **Database / API**  
                           ↓  
                 **Application Services**  
                           ↓  
                    **SfChartWizard**  
                           ↓  
                      **End User**

This separation keeps business logic inside your application while giving users freedom to explore data visually.

New to Chart Wizard? The official Getting Started guide walks you through the complete setup process.

Building an Olympic medal dashboard with Chart Wizard

Let’s build an interactive Olympic medal dashboard that supports chart customization, layout persistence, and export.

Define the data model

Chart Wizard works with standard .NET objects, making it easy to integrate with existing business data. We’ll use a simple model representing Olympic medal standings.

C#

public class OlympicMedalData 
{ 
    public string Country { get; set; } = string.Empty; 
    public int GoldMedals { get; set; } 
    public int SilverMedals { get; set; } 
    public int BronzeMedals { get; set; } 
}

Prepare sample Olympic medal data

In this example, we’ll use medal data from the Paris 2024 Olympics.

C#

private readonly List<OlympicMedalData> MedalRecords = new() 
{ 
    new()
    {
        Country = "United States",
        GoldMedals = 40,
        SilverMedals = 44,
        BronzeMedals = 42
    },
    …
    new()
    {
        Country = "France",
        GoldMedals = 16,
        SilverMedals = 26,
        BronzeMedals = 22
    }
};

Configure category and series fields

Next, choose the category and series fields. The Chart Wizard uses category fields for labels and numeric fields for series, helping it determine the best way to visualize your data.

C#

private readonly List<string> CategoryFields = new()
{
    "Country"
};
private readonly List<string> SeriesFields = new()
{
    "GoldMedals",
    "SilverMedals",
    "BronzeMedals"
};

Add the Chart Wizard component

We’ll add the SfChartWizard component to your Blazor page and bind it to the Olympic medal data.

razor

@using Syncfusion.Blazor.ChartWizard 

<SfChartWizard Width="100%" Height="600px"> 
    <ChartSettings DataSource="@MedalRecords" 
                   CategoryFields="@CategoryFields" 
                   SeriesFields="@SeriesFields" 
                   SeriesType="ChartWizardSeriesType.Column"> 
    </ChartSettings> 
</SfChartWizard>

What happens next?

After deployment, users can:

• Switch chart types.
• Modify series mappings.
• Reconfigure the visualization.
• Explore the data from different perspectives.

Without Chart Wizard, supporting these capabilities typically requires building custom interfaces.

You can use the SeriesType property to set the initial chart type, while the wizard allows configuration changes to supported chart types at runtime.

Interactive Chart Wizard Visualization of Paris 2024 Olympic Medal Standings

Enhance the Chart Wizard with advanced features

Save and restore chart configuration

Users often spend time configuring charts exactly the way they want. Serialization allows those configurations to be saved and restored later.

Two methods make this possible:

• SaveChart(): Serializes the current chart state and returns it as a JSON string.

• LoadChartAsync(string data): Loads a chart configuration from a JSON string produced by SaveChart().

Use the following example to wire save and restore buttons.

razor

<div class="toolbar" style="margin-bottom: 12px;">
    <button class="btn btn-primary" @onclick="SaveChartAsync">Save layout</button>
    <button class="btn btn-secondary"
            @onclick="LoadChartAsync"
            disabled="@string.IsNullOrWhiteSpace(serializedChart)">
        Restore layout
    </button>
</div>
@code
{
    //……
    private Task SaveChartAsync()
    { 
        if (ChartWizard is null)
        {
            statusMessage = "Chart Wizard is not ready yet.";
            return Task.CompletedTask;
        }
        serializedChart = ChartWizard.SaveChart();
        statusMessage = "Chart layout saved for this session.";
        return Task.CompletedTask;
    }

    private async Task LoadChartAsync()
    {
        if (ChartWizard is null || string.IsNullOrWhiteSpace(serializedChart))
        {
            statusMessage = "No saved chart layout is available.";
            return;
        }

        await ChartWizard.LoadChartAsync(serializedChart);
        statusMessage = "Saved chart layout restored.";
    }
    //…
}

The serialized output can be stored in:

• Databases
• Browser storage
• Files
• Cloud storage

This makes it possible to provide personalized dashboards that survive between sessions.

Chart Wizard with Serialization

Persist saved chart layouts

When storing chart configurations, remember that applications evolve.

• Field names may change.
• Data models may be reorganized.
• Users may load configurations created months earlier.

For that reason, consider storing:

C#

public class SavedChartLayout
{
    public int Id { get; set; }
    public string UserId { get; set; } = string.Empty;
    public string LayoutName { get; set; } = string.Empty;
    public string ChartStateJson { get; set; } = string.Empty;
    public string DataSchemaVersion { get; set; } = "v1";
    public DateTime UpdatedUtc { get; set; }
}

Save operation

C#

var layout = new SavedChartLayout
{
    UserId = userId,
    LayoutName = "My Medal Dashboard",
    ChartStateJson = ChartWizard.SaveChart(),
    UpdatedUtc = DateTime.UtcNow
};

dbContext.ChartLayouts.Add(layout);
await dbContext.SaveChangesAsync();

Load operation

C#

var layout = await dbContext.ChartLayouts
    .FirstOrDefaultAsync(x => x.Id == layoutId);
await ChartWizard.LoadChartAsync(layout.ChartStateJson);

Store a schema version with the layout. If you later rename GoldMedals to Gold, an old, saved layout may reference a field that no longer exists.

Handling invalid saved layouts

Saved layouts can become invalid if fields are renamed, removed, or reorganized after deployment.

Before calling LoadChartAsync(), consider validating:

• Layout ownership
• Schema version compatibility
• Required fields
• JSON format integrity

If validation fails, notify the user and fall back to a default chart configuration rather than attempting to restore the layout.

Read the full blog post on the Syncfusion Website