syncfusion-blazor-chart-wizard

Implementing Syncfusion Blazor Chart Wizard

NuGet: Syncfusion.Blazor.ChartWizard + Syncfusion.Blazor.Themes
Namespace: Syncfusion.Blazor.ChartWizard

The Syncfusion Blazor Chart Wizard is a comprehensive, user-friendly component that guides users through interactive chart creation and customization. It provides a dialog-based interface with property panels, multiple chart types, data binding, theming, accessibility features, and export capabilities.

When to Use This Skill

Use this skill when:

Interactive Chart Creation: Building applications that allow users to create and customize charts interactively
Data Visualization Tools: Implementing dashboard builders, report generators, or analytics interfaces
Guided Chart Configuration: Providing step-by-step chart setup with visual property panels
Multi-Format Export: Requiring chart export to PNG, JPEG, SVG, PDF, CSV, or XLSX formats
Theme-Aware Charts: Building charts that adapt to application themes (Material, Fluent, Bootstrap, Tailwind, etc.)
Accessible Visualizations: Creating WCAG 2.2 AA compliant charts with keyboard navigation and screen reader support
Chart State Persistence: Saving and loading chart configurations for user preferences or templates
Blazor Applications: Implementing in Blazor Server, WebAssembly, or Web App architectures

Component Overview

The Chart Wizard component provides:

Interactive Chart Builder: Step-by-step guided interface for chart creation
15+ Chart Types: Line, Column, Bar, Area, Pie, Scatter, and stacked variations
Property Panel: Real-time chart customization with visual controls
Data Binding: Support for IEnumerable, List, and ObservableCollection data sources
Multi-Series Support: Create charts with multiple data series and categories
Export Capabilities: Export to image (PNG, JPEG, SVG), document (PDF), and data formats (CSV, XLSX)
Serialization: Save and load complete chart configurations as JSON
Theming: 20+ built-in themes with consistent styling
Accessibility: Full WCAG 2.2 AA compliance with keyboard navigation
RTL Support: Right-to-left layout for international applications

Documentation and Navigation Guide

Getting Started

Choose the appropriate setup guide based on your Blazor application type:

Blazor Server App Setup

📄 Read: references/getting-started.md

Complete setup instructions for Blazor Server applications, including:

Visual Studio, VS Code, and .NET CLI project creation
NuGet package installation (Syncfusion.Blazor.ChartWizard)
Namespace imports and service registration
Script reference configuration
Component implementation
Data model creation and binding
Theme configuration
Complete working example with Olympics data
Troubleshooting common setup issues

Blazor WebAssembly (WASM) App Setup

📄 Read: references/getting-started-wasm.md

Complete setup instructions for Blazor WASM applications, including:

WASM-specific project creation across IDEs
Package installation with dependency restoration
Configuration for client-side rendering
Component setup and data binding
Theme configuration for WASM
Complete functional WASM example
Performance optimization considerations

Blazor Web App Setup

📄 Read: references/getting-started-web-app.md

Complete setup instructions for Blazor Web Apps with render modes, including:

Interactive render mode configuration (Server, WebAssembly, Auto)
Interactivity location setup (Global, Per page/component)
Client vs Server project package management
Render mode-specific component implementation
Theme management across render modes
Complete Web App example with Auto mode
Best practices for choosing render modes

Working with Data

📄 Read: references/working-with-data.md

Comprehensive data binding and field configuration, including:

ChartSettings configuration and properties
DataSource binding (IEnumerable)
CategoryFields configuration for x-axis grouping
SeriesFields for multi-series data mapping
SeriesType selection (15+ chart types)
Single-series vs multi-series chart patterns
List data binding examples
ObservableCollection for dynamic data
Data model design best practices
Field mapping and ordering
Complete examples with Olympics and sales data
Troubleshooting data display issues

Appearance and Customization

📄 Read: references/appearance-customization.md

Visual customization and layout configuration, including:

Width and Height properties (percentage and pixel-based)
Responsive design patterns
Theme property configuration (20+ built-in themes)
- Material, Material3, MaterialDark, Material3Dark
- Fluent, Fluent2, FluentDark, Fluent2Dark, Fluent2HighContrast
- Bootstrap, Bootstrap4, Bootstrap5, BootstrapDark, Bootstrap5Dark
- Tailwind, Tailwind3, TailwindDark, Tailwind3Dark
- Fabric, FabricDark
- HighContrast, HighContrastLight
Theme stylesheet prerequisites and inclusion
EnableRtl for right-to-left layout support
PropertyPanelExpanded for initial panel state control
Combined appearance configuration examples
Theme consistency best practices
Troubleshooting theme and sizing issues

Accessibility

📄 Read: references/accessibility.md

Comprehensive accessibility compliance and features, including:

WCAG 2.2 AA level support
Section 508 compliance
WAI-ARIA attributes and roles
- Data labels, legends, axis titles
- Chart titles and series points
- ARIA roles: img, button, region
- ARIA attributes: label, hidden, pressed
Screen reader support
Complete keyboard navigation
- Focus management (Alt+J, Tab, Shift+Tab)
- Data point navigation (Arrow keys)
- Series selection (Enter, Space)
- Legend navigation and toggling
- Zoom and pan controls
- Print shortcut (Ctrl+P)
Color contrast compliance
Mobile device support
Axe-core validation integration
Testing guidelines and best practices

Serialization

📄 Read: references/serialization.md

Chart state save and load functionality, including:

SaveChart() method - serialize to JSON string
LoadChartAsync() method - restore from JSON
Complete chart state capture (settings, series, axes, titles, styles)
Storage options (database, file, LocalStorage, session state)
Save and load button implementation
Component reference setup (@ref)
State management patterns
Version compatibility considerations
Use cases: user preferences, dashboard configs, report templates
Error handling and validation
Complete working examples

Print and Export

📄 Read: references/print-export.md

Export charts to multiple formats, including:

Supported formats: PNG, JPEG, SVG, PDF, CSV, XLSX, PRINT
ChartExportSettings declarative configuration
- FileName property
- Width and Height for image/PDF exports
- Orientation (Portrait/Landscape) for PDF/print
Export button integration
Print functionality via browser dialog
Exporting event for runtime customization
- ChartExportingEventArgs properties
- Dynamic file naming
- Conditional export cancellation
- Runtime dimension adjustment
- Orientation control
Format-specific considerations
Best practices for resolution and file naming
Complete examples with event handling
Troubleshooting export issues

API Reference

📄 Read: references/api-reference.md

Complete API documentation for all classes, properties, methods, and events, including:

SfChartWizard class
- Width, Height, Theme properties
- EnableRtl, PropertyPanelExpanded
- Exporting event
- SaveChart(), LoadChartAsync() methods
ChartSettings class
- Datasource, CategoryFields, SeriesFields
- SeriesType property with 15+ types
ChartExportSettings class
- FileName, Width, Height, Orientation
ChartExportingEventArgs class
- Event arguments for export customization
ChartWizardSeriesType enum
- All available series types
PageOrientation enum
- Portrait and Landscape options

Quick Start Example

Here's a minimal example to get you started with the Chart Wizard component:

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="100%" Height="500px">
    <ChartSettings DataSource="@Data"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Column">
    </ChartSettings>
</SfChartWizard>

@code {
    public class OlympicsData
    {
        public string Country { get; set; }
        public int Gold { get; set; }
        public int Silver { get; set; }
        public int Bronze { get; set; }
    }

    private readonly List<string> CategoryList = new() { "Country" };
    private readonly List<string> SeriesList = new() { "Gold", "Silver", "Bronze" };

    private List<OlympicsData> Data = new()
    {
        new OlympicsData { Country = "USA",   Gold = 40, Silver = 44, Bronze = 42 },
        new OlympicsData { Country = "China", Gold = 40, Silver = 27, Bronze = 24 },
        new OlympicsData { Country = "Japan", Gold = 20, Silver = 12, Bronze = 13 }
    };
}

Common Patterns

Single-Series Chart

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="100%" Height="500px">
    <ChartSettings DataSource="@SalesData"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Line">
    </ChartSettings>
</SfChartWizard>

@code {
    public class SalesInfo
    {
        public string Month { get; set; }
        public double Sales { get; set; }
    }

    private List<SalesInfo> SalesData = new()
    {
        new SalesInfo { Month = "Jan", Sales = 100 },
        new SalesInfo { Month = "Feb", Sales = 120 },
        new SalesInfo { Month = "Mar", Sales = 140 }
    };

    private readonly List<string> CategoryList = new() { "Month" };
    private readonly List<string> SeriesList = new() { "Sales" };
}

Multi-Series with Theme

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Theme="Theme.Fluent2" Width="100%" Height="500px">
    <ChartSettings DataSource="@OlympicsData"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Bar">
    </ChartSettings>
</SfChartWizard>

@code {
    private readonly List<string> CategoryList = new() { "Country" };
    private readonly List<string> SeriesList = new() { "Gold", "Silver", "Bronze" };

    public class OlympicsDataModel
    {
        public string Country { get; set; }
        public int Gold { get; set; }
        public int Silver { get; set; }
        public int Bronze { get; set; }
    }

    private List<OlympicsDataModel> OlympicsData = new()
    {
        new OlympicsDataModel { Country = "USA",   Gold = 40, Silver = 44, Bronze = 42 },
        new OlympicsDataModel { Country = "China", Gold = 40, Silver = 27, Bronze = 24 },
        new OlympicsDataModel { Country = "Japan", Gold = 20, Silver = 12, Bronze = 13 }
    };
}

With Export Configuration

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="100%" Height="500px">
    <ChartSettings DataSource="@ReportData"
                   CategoryFields="@CategoryList"
                   SeriesFields="@SeriesList"
                   SeriesType="ChartWizardSeriesType.Column">

        <ChartExportSettings FileName="QuarterlyReport"
                             Width="1024"
                             Height="768"
                             Orientation="Syncfusion.Blazor.ChartWizard.PageOrientation.Landscape" />
    </ChartSettings>
</SfChartWizard>

@code {
    private readonly List<string> CategoryList = new() { "Quarter" };
    private readonly List<string> SeriesList = new() { "Revenue", "Profit" };

    public class ReportItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
        public double Profit { get; set; }
    }

    private List<ReportItem> ReportData = new()
    {
        new ReportItem { Quarter = "Q1", Revenue = 120000, Profit = 45000 },
        new ReportItem { Quarter = "Q2", Revenue = 150000, Profit = 60000 },
        new ReportItem { Quarter = "Q3", Revenue = 170000, Profit = 75000 },
        new ReportItem { Quarter = "Q4", Revenue = 200000, Profit = 90000 }
    };
}

With Property Panel Collapsed

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="90%"
               Height="600px"
               PropertyPanelExpanded="false"
               Theme="Theme.Material3">

    <ChartSettings DataSource="@MyData"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Area">
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "CategoryName" };
    private readonly List<string> SeriesFields = new() { "Value1", "Value2" };

    public class MyItem
    {
        public string CategoryName { get; set; }
        public double Value1 { get; set; }
        public double Value2 { get; set; }
    }

    private List<MyItem> MyData = new()
    {
        new MyItem { CategoryName = "A", Value1 = 30, Value2 = 20 },
        new MyItem { CategoryName = "B", Value1 = 45, Value2 = 35 },
        new MyItem { CategoryName = "C", Value1 = 50, Value2 = 40 }
    };
}

Key Properties

SfChartWizard Properties

Property	Type	Default	Description
Width	string	"100%"	Width of the component (px or %)
Height	string	"100%"	Height of the component (px or %)
Theme	Theme	Fluent2	Visual theme (Material, Fluent, Bootstrap, Tailwind, etc.)
EnableRtl	bool	false	Enable right-to-left layout
PropertyPanelExpanded	bool	true	Show property panel on initial render

ChartSettings Properties

Property	Type	Required	Description
DataSource	IEnumerable	Yes	Data collection for the chart
CategoryFields	List	Yes	Field names for x-axis categories
SeriesFields	List	Yes	Field names for data series
SeriesType	ChartWizardSeriesType	No	Chart type (Line, Column, Bar, Area, Pie, etc.)

ChartExportSettings Properties

Property	Type	Default	Description
FileName	string	""	Name for exported file (without extension)
Width	double	NaN	Export width in pixels
Height	double	NaN	Export height in pixels
Orientation	PageOrientation	Portrait	Page orientation for PDF/print

Common Use Cases

Business Analytics Dashboard

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="100%"
               Height="600px"
               Theme="Theme.Bootstrap5">

    <ChartSettings DataSource="@QuarterlySales"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.StackingColumn">

        <ChartExportSettings FileName="QuarterlyAnalysis"
                             Orientation="Syncfusion.Blazor.ChartWizard.PageOrientation.Landscape" />
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "Quarter", "Region" };
    private readonly List<string> SeriesFields = new() { "Revenue", "Profit", "Expenses" };

    public class QuarterlySale
    {
        public string Quarter { get; set; }
        public string Region { get; set; }
        public double Revenue { get; set; }
        public double Profit { get; set; }
        public double Expenses { get; set; }
    }

    private List<QuarterlySale> QuarterlySales = new()
    {
        new QuarterlySale { Quarter = "Q1", Region = "North", Revenue = 150000, Profit = 50000, Expenses = 30000 },
        new QuarterlySale { Quarter = "Q2", Region = "North", Revenue = 170000, Profit = 60000, Expenses = 35000 },
        new QuarterlySale { Quarter = "Q3", Region = "South", Revenue = 160000, Profit = 55000, Expenses = 32000 },
        new QuarterlySale { Quarter = "Q4", Region = "South", Revenue = 180000, Profit = 65000, Expenses = 38000 }
    };
}

Olympics Medal Comparison

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Theme="Theme.Material3"
               PropertyPanelExpanded="true"
               Width="100%"
               Height="500px">

    <ChartSettings DataSource="@OlympicsMedals"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Bar">
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "Country" };
    private readonly List<string> SeriesFields = new() { "Gold", "Silver", "Bronze" };

    public class OlympicsMedalInfo
    {
        public string Country { get; set; }
        public int Gold { get; set; }
        public int Silver { get; set; }
        public int Bronze { get; set; }
    }

    private List<OlympicsMedalInfo> OlympicsMedals = new()
    {
        new OlympicsMedalInfo { Country = "USA",   Gold = 40, Silver = 44, Bronze = 42 },
        new OlympicsMedalInfo { Country = "China", Gold = 40, Silver = 27, Bronze = 24 },
        new OlympicsMedalInfo { Country = "Japan", Gold = 20, Silver = 12, Bronze = 13 }
    };
}

Sales Trend Visualization

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard Width="90%"
               Height="500px">

    <ChartSettings DataSource="@MonthlySales"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Line">
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "Month" };
    private readonly List<string> SeriesFields = new() { "CurrentYear", "PreviousYear" };

    public class SalesRecord
    {
        public string Month { get; set; }
        public double CurrentYear { get; set; }
        public double PreviousYear { get; set; }
    }

    private List<SalesRecord> MonthlySales = new()
    {
        new SalesRecord { Month = "Jan", CurrentYear = 12000, PreviousYear = 10000 },
        new SalesRecord { Month = "Feb", CurrentYear = 13500, PreviousYear = 11000 },
        new SalesRecord { Month = "Mar", CurrentYear = 15000, PreviousYear = 12500 }
    };
}

Multi-Category Population Data

@using Syncfusion.Blazor.ChartWizard

<SfChartWizard EnableRtl="false"
               Theme="Theme.Fluent2"
               Width="100%"
               Height="500px">

    <ChartSettings DataSource="@CityPopulation"
                   CategoryFields="@CategoryFields"
                   SeriesFields="@SeriesFields"
                   SeriesType="ChartWizardSeriesType.Column">
    </ChartSettings>

</SfChartWizard>

@code {
    private readonly List<string> CategoryFields = new() { "City", "Country" };
    private readonly List<string> SeriesFields = new() { "Population" };

    public class PopulationInfo
    {
        public string City { get; set; }
        public string Country { get; set; }
        public double Population { get; set; }
    }

    private List<PopulationInfo> CityPopulation = new()
    {
        new PopulationInfo { City = "Tokyo",       Country = "Japan",  Population = 37.4 },
        new PopulationInfo { City = "Delhi",       Country = "India",  Population = 31.0 },
        new PopulationInfo { City = "Shanghai",    Country = "China",  Population = 27.0 },
        new PopulationInfo { City = "São Paulo",   Country = "Brazil", Population = 22.0 }
    };
}

Available Chart Types (SeriesType)

Line - Line chart with connected data points
StackingLine - Stacked line chart
StackingLine100 - 100% stacked line chart
Column - Vertical bar chart
StackingColumn - Stacked column chart
StackingColumn100 - 100% stacked column chart
Bar - Horizontal bar chart
StackingBar - Stacked bar chart
StackingBar100 - 100% stacked bar chart
Area - Area chart with filled regions
StackingArea - Stacked area chart
StackingArea100 - 100% stacked area chart
Scatter - Scatter plot with individual markers
Pie - Circular pie chart for proportions

Prerequisites

.NET SDK 6.0 or later
Syncfusion Blazor license (trial or commercial)
Blazor Server, WebAssembly, or Web App project
Visual Studio 2022, VS Code, or .NET CLI

Package Requirements

dotnet add package Syncfusion.Blazor.ChartWizard

Namespace Imports

@using Syncfusion.Blazor
@using Syncfusion.Blazor.ChartWizard

Service Registration

// Program.cs
builder.Services.AddSyncfusionBlazor();

Script Reference

<!-- App.razor or _Host.cshtml -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Next Steps

Choose your Blazor application type (Server, WASM, or Web App)
Read the appropriate getting started guide
Configure data binding with your data models
Customize appearance with themes and properties
Implement export and serialization as needed
Ensure accessibility compliance for production use

Related Components

Syncfusion Blazor Charts - For programmatic chart creation without wizard interface
Syncfusion Blazor DataGrid - For tabular data visualization
Syncfusion Blazor Dashboard Layout - For arranging multiple charts

About this skill