syncfusion-blazor-chart-wizard

What this skill does

# 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, PropertyPanelExpand