syncfusion-blazor-charts

What this skill does

# Implementing Syncfusion Blazor Charts

**NuGet:** `Syncfusion.Blazor.Charts` + `Syncfusion.Blazor.Themes`  
**Namespace:** `Syncfusion.Blazor.Charts`

A comprehensive guide for implementing the Syncfusion Blazor Chart component to create interactive, feature-rich data visualizations in Blazor applications. The Chart component supports 33+ chart types, multiple axes, advanced interactivity, and extensive customization options.

## When to Use This Skill

Use this skill when you need to:
- **Create data visualizations** in Blazor applications (line, column, bar, area, etc.)
- **Implement financial charts** for stock analysis (candle, HILO, HILOOC)
- **Build statistical visualizations** (histogram, box-whisker, pareto, waterfall)
- **Display comparative data** with stacked or grouped charts
- **Show range-based data** with range area/column charts
- **Create polar or radar charts** for circular data representation
- **Add interactive features** like tooltips, zooming, crosshair, selection
- **Customize chart appearance** with themes, gradients, annotations
- **Handle dynamic data** with live updates and data editing
- **Implement accessible charts** with ARIA support and internationalization

## Component Overview

The Syncfusion Blazor Chart component is a powerful data visualization tool that provides:

- **33+ Chart Types:** Line, Column, Bar, Area, Spline, Scatter, Bubble, Candle, HILO, Polar, Radar, and more
- **Multiple Axes:** Support for category, numeric, datetime, and logarithmic axes
- **Rich Interactivity:** Zooming, panning, crosshair, trackball, tooltips, selection
- **Data Binding:** Work with List, DataManager, dynamic updates, and live data
- **Visual Elements:** Markers, data labels, annotations, legends, gradients
- **Advanced Features:** Technical indicators, trend lines, strip lines, multiple panes
- **Accessibility:** Full ARIA support, keyboard navigation, localization, RTL
- **Customization:** Themes, responsive design, print support, adaptive layout

## Documentation and Navigation Guide

### Complete API Reference

📄 **Read:** [references/api-reference.md](references/api-reference.md)

**CRITICAL: Use this reference FIRST for all API-related questions**

Use this authoritative API reference when:
- Looking up correct enum values (ChartSeriesType, ValueType, SelectionMode, etc.)
- Finding public method signatures (RefreshAsync, ExportAsync, ShowTooltip, etc.)
- Verifying property names and types
- Generating code samples
- Troubleshooting API-related issues

Topics covered:
- Complete list of SfChart public methods with signatures
- All chart enumerations with correct values
- Key component classes and their properties
- Method usage examples
- Common patterns and best practices

**Key Points:**
- All enum values are **exact** - do not use variations
- Method names follow C# conventions (e.g., `RefreshAsync` not `Refresh`)
- Always use `@ref` to access chart instance for method calls
- Namespace: `Syncfusion.Blazor.Charts`

---

### Getting Started

📄 **Read:** [references/getting-started.md](references/getting-started.md)

Use this when:
- Setting up a new Blazor Chart project
- Installing NuGet packages and configuring services
- Creating your first chart component
- Understanding basic chart structure and data binding
- Working with Visual Studio, VS Code, or .NET CLI

Topics covered:
- Installation and prerequisites
- Package setup (Syncfusion.Blazor.Charts)
- Namespace imports and service registration
- Script references
- Basic chart implementation
- Simple data binding example

---

### Chart Types

#### Common Chart Types

📄 **Read:** [references/chart-types-common.md](references/chart-types-common.md)

Use this for frequently-used chart types:
- Line charts for trend visualization
- Area charts for showing magnitude over time
- Column charts for categorical comparisons
- Bar charts for horizontal comparisons
- Spline charts for smooth curves
- Step charts for stepped data progression

Topics covered:
- Line, Area, Column, Bar chart implementations
- Spline and Spline Area variations
- Step Line and Step Area patterns
- When to use each chart type
- Configuration and customization
- Multi-series examples

#### Specialized Chart Types

📄 **Read:** [references/chart-types-specialized.md](references/chart-types-specialized.md)

Use this for specialized visualization needs:
- Financial charts (Candle, HILO, HILOOC)
- Statistical charts (Box-Whisker, Histogram, Error Bar, Pareto, Waterfall)
- Stacked charts (Stack Area/Bar/Column/Line)
- Range charts (Range Area/Column/Step Area)
- Polar and Radar charts
- Scatter and Bubble charts
- Vertical chart orientation

Topics covered:
- Financial chart patterns and configurations
- Statistical analysis chart types
- Stacking modes (normal vs 100%)
- Range visualization techniques
- Circular chart layouts
- XY scatter relationships
- Chart orientation options

---

### Axes and Data Configuration

📄 **Read:** [references/axes-and-scales.md](references/axes-and-scales.md)

Use this when:
- Configuring axis types (category, numeric, datetime, logarithmic)
- Customizing axis appearance and behavior
- Formatting axis labels and values
- Working with multiple axes
- Setting axis ranges and intervals

Topics covered:
- Category axis for discrete data
- Numeric axis for continuous values
- DateTime axis for time-series data
- Logarithmic axis for exponential data
- Axis customization (title, range, interval)
- Label formatting, rotation, and positioning
- Multiple axis configuration
- Inverse and opposed axes

📄 **Read:** [references/data-handling.md](references/data-handling.md)

Use this when:
- Binding data sources to charts
- Adding, removing, or updating data dynamically
- Enabling data editing
- Sorting chart data
- Working with live or streaming data

Topics covered:
- Data source binding (List, DataManager)
- Dynamic data operations
- Data editing functionality
- Chart sorting options
- Real-time data updates
- Data serialization patterns

---

### Visual Elements

📄 **Read:** [references/visual-elements.md](references/visual-elements.md)

Use this when:
- Adding data markers to chart points
- Displaying data labels on series
- Creating custom label templates
- Adding annotations (text, shapes, images)
- Applying gradient fills

Topics covered:
- Data marker types and customization
- Data label visibility and formatting
- Label positioning strategies
- Data label templates
- Last data label highlighting
- Chart annotations (text, shapes, images)
- Gradient color fills

📄 **Read:** [references/legend.md](references/legend.md)

Use this when:
- Enabling and configuring chart legend
- Positioning legend (top, bottom, left, right)
- Customizing legend appearance
- Implementing legend click behavior
- Creating custom legend templates

Topics covered:
- Legend visibility and positioning
- Legend shape and text customization
- Interactive legend (toggle series)
- Legend pagination
- Custom legend templates
- Legend alignment options

---

### Interactive Features

📄 **Read:** [references/interactive-features.md](references/interactive-features.md)

Use this when:
- Enabling tooltips with custom formatting
- Adding crosshair or trackball for data tracking
- Implementing point, series, or cluster selection
- Enabling zooming and panning
- Creating interactive user experiences

Topics covered:
- Tooltip configuration and templates
- Crosshair and trackball features
- Selection modes and patterns
- Zoom types (selection, pinch, mousewheel)
- Zoom toolbar configuration
- Pan functionality
- User interaction events

---

### Customization and Appearance

📄 **Read:** [references/appearance-styling.md](references/appearance-styling.md)

Use this when:
- Customizing chart appearance and themes
- Setting chart dimensions and sizing
- Configuring responsive/adaptive layout
- Enabling print functionality
- Styling background, borders, and margins

Topics covered:
- Chart appearance custo