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](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](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](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](references/working-with-data.md) Comprehensive data binding and field configuration, including: - ChartSettings configuration and properties - DataSource binding (IEnumerable<Object>) - 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<T> 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](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](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](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](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](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: ```cshtml @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 ```cshtml @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 ```cshtml @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 ```cshtml @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 ```cshtml @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<object> | Yes | Data collection for the chart | | **CategoryFields** | List<string> | Yes | Field names for x-axis categories | | **SeriesFields** | List<string> | Yes | Field names for data series | | **SeriesType** | ChartWizardSeriesType | No | Chart type (Line, Column, Bar, Area, Pie, etc.) | ### ChartExportSettings Properties | Property | Type | Default | Description |