+ {
+ new AccessibleDataPoint { Label = "Category A", Value = 75 },
+ new AccessibleDataPoint { Label = "Category B", Value = 60 },
+ new AccessibleDataPoint { Label = "Category C", Value = 85 }
+ };
+
+ // Color-blind friendly palette
+ public string[] AccessiblePalette = new string[]
+ {
+ "#0173B2", "#DE8F05", "#029E73", "#CC78BC", "#CA9161"
+ };
+}
+```
+
+### Troubleshooting Common Issues
+
+**Issue: Chart not rendering at correct size**
+- Solution: Add script reference to avoid delayed rendering
+```html
+
+```
+
+**Issue: Colors not applying correctly**
+- Solution: Ensure Palettes array matches or exceeds number of series
+- Alternatively, use Fill property on individual series
+
+**Issue: Responsive behavior not working**
+- Solution: Use percentage values (e.g., "100%") instead of fixed pixels
+- Ensure parent container has defined dimensions
+
+**Issue: Title overlapping chart content**
+- Solution: Adjust ChartMargin Top property to provide space
+- Consider using title Position property
+
+---
+
+## Complete Styling Example
+
+Here's a comprehensive example combining multiple styling techniques:
+
+```razor
+@using Syncfusion.Blazor.Charts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class CompleteDataPoint
+ {
+ public string Month { get; set; }
+ public double Sales { get; set; }
+ public double Target { get; set; }
+ }
+
+ public List CompleteData = new List
+ {
+ new CompleteDataPoint { Month = "Jan", Sales = 35000, Target = 40000 },
+ new CompleteDataPoint { Month = "Feb", Sales = 42000, Target = 40000 },
+ new CompleteDataPoint { Month = "Mar", Sales = 38000, Target = 40000 },
+ new CompleteDataPoint { Month = "Apr", Sales = 45000, Target = 45000 },
+ new CompleteDataPoint { Month = "May", Sales = 48000, Target = 45000 },
+ new CompleteDataPoint { Month = "Jun", Sales = 52000, Target = 50000 }
+ };
+
+ public string[] CompletePalette = new string[]
+ {
+ "#2196F3", "#FF9800", "#4CAF50", "#E91E63"
+ };
+}
+```
+
+---
+
+## Summary
+
+This reference guide covers all essential aspects of Syncfusion Blazor Charts appearance and styling:
+
+- **Dimensions**: Control chart size using pixels, percentages, or container sizing
+- **Colors**: Customize using palettes, series colors, or point-level colors
+- **Backgrounds**: Apply backgrounds to chart and chart area with borders
+- **Margins**: Configure spacing around the chart
+- **Titles**: Style titles and subtitles with fonts, colors, and positioning
+- **Themes**: Use built-in themes or create custom color schemes
+- **Series**: Customize individual series with fills, opacity, and borders
+- **Responsiveness**: Create adaptive charts for all screen sizes
+- **Best Practices**: Follow design guidelines for optimal appearance and performance
+
+Use these techniques to create professional, accessible, and visually appealing chart visualizations in your Blazor applications.
\ No newline at end of file
diff --git a/skills/syncfusion-blazor-toolkit-charts/references/axes-and-scales.md b/skills/syncfusion-blazor-toolkit-charts/references/axes-and-scales.md
new file mode 100644
index 0000000..d68d798
--- /dev/null
+++ b/skills/syncfusion-blazor-toolkit-charts/references/axes-and-scales.md
@@ -0,0 +1,926 @@
+# Blazor Chart Axes and Scales - Comprehensive Reference Guide
+
+## Table of Contents
+
+- [1. Category Axis](#1-category-axis)
+ - [Basic Setup](#basic-setup)
+ - [Label Placement](#label-placement)
+ - [Range and Interval](#range-and-interval)
+ - [Indexed Category Axis](#indexed-category-axis)
+- [2. Numeric Axis](#2-numeric-axis)
+ - [Basic Configuration](#basic-configuration)
+ - [Numeric Range and Interval](#numeric-range-and-interval)
+ - [Range Padding Types](#range-padding-types)
+ - [Numeric Label Format](#numeric-label-format)
+ - [Grouping Separator](#grouping-separator)
+- [3. DateTime Axis](#3-datetime-axis)
+ - [Basic DateTime Axis](#basic-datetime-axis)
+ - [DateTime Category Axis](#datetime-category-axis)
+ - [Interval Customization](#interval-customization)
+ - [DateTime Range Padding](#datetime-range-padding)
+ - [DateTime Label Format](#datetime-label-format)
+- [4. Logarithmic Axis](#4-logarithmic-axis)
+ - [Logarithmic Basic Configuration](#logarithmic-basic-configuration)
+ - [Logarithmic Base](#logarithmic-base)
+ - [Logarithmic Interval](#logarithmic-interval)
+ - [Logarithmic Label Format](#logarithmic-label-format)
+- [5. Axis Customization](#5-axis-customization)
+ - [Axis Titles](#axis-titles)
+ - [Axis Crossing](#axis-crossing)
+ - [Opposed Position](#opposed-position)
+ - [Inversed Axis](#inversed-axis)
+ - [Tick Lines](#tick-lines)
+ - [Grid Lines](#grid-lines)
+- [6. Axis Labels](#6-axis-labels)
+ - [Smart Axis Labels](#smart-axis-labels)
+ - [Label Positioning](#label-positioning)
+ - [Label Rotation](#label-rotation)
+ - [Label Trimming](#label-trimming)
+ - [Label Wrapping](#label-wrapping)
+ - [Edge Label Placement](#edge-label-placement)
+ - [Multilevel Labels](#multilevel-labels)
+- [7. Multiple Axes](#7-multiple-axes)
+ - [Secondary Axes](#secondary-axes)
+ - [Axis Naming](#axis-naming)
+ - [Multiple Rows and Columns](#multiple-rows-and-columns)
+- [8. Common Properties](#8-common-properties)
+- [9. Best Practices](#9-best-practices)
+- [10. Troubleshooting](#10-troubleshooting)
+- [Complete Working Example](#complete-working-example)
+- [Summary](#summary)
+
+
+## 1. Category Axis
+
+### Basic Setup
+Category axis is used to represent string values instead of numeric values.
+
+```cshtml
+@using Syncfusion.Blazor.Toolkit.Charts
+
+
+
+
+
+
+
+
+
+
+
+@code{
+ public class ChartData
+ {
+ public string Country { get; set; }
+ public double Medals { get; set; }
+ }
+
+ public List MedalDetails = new List
+ {
+ new ChartData { Country = "USA", Medals = 46 },
+ new ChartData { Country = "GBR", Medals = 27 },
+ new ChartData { Country = "CHN", Medals = 26 },
+ new ChartData { Country = "UK", Medals = 23 },
+ new ChartData { Country = "AUS", Medals = 16 }
+ };
+}
+```
+
+### Label Placement
+Category labels can be positioned between ticks or on ticks.
+
+```cshtml
+
+
+```
+
+**Options:**
+- `BetweenTicks` - Labels appear between tick marks (default)
+- `OnTicks` - Labels appear on tick marks
+
+### Range and Interval
+Control the visible range and spacing of category labels.
+
+```cshtml
+
+
+```
+
+### Indexed Category Axis
+Use data source index values for rendering category axis.
+
+```cshtml
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## 2. Numeric Axis
+
+### Basic Configuration
+Numeric axis uses double values and is the default axis type.
+
+```cshtml
+
+
+
+
+
+
+
+
+
+
+@code{
+ public List Data = new List
+ {
+ new ChartData { XValue = 10, YValue = 21 },
+ new ChartData { XValue = 20, YValue = 24 },
+ new ChartData { XValue = 30, YValue = 36 },
+ new ChartData { XValue = 40, YValue = 38 }
+ };
+}
+```
+
+### Numeric Range and Interval
+
+```cshtml
+
+
+```
+
+### Range Padding Types
+
+**None** - Minimum and maximum based on data
+```cshtml
+
+
+```
+
+**Round** - Rounds to nearest interval value
+```cshtml
+
+
+```
+
+**Additional** - Adds interval padding
+```cshtml
+
+
+```
+
+**Normal** - Applies default padding
+```cshtml
+
+
+```
+
+**Auto** - Horizontal uses None, Vertical uses Normal
+```cshtml
+
+
+```
+
+### Numeric Label Format
+
+```cshtml
+
+
+```
+
+**Common Formats:**
+| Format | Example | Description |
+|--------|---------|-------------|
+| n1 | 1000.0 | 1 decimal place |
+| n2 | 1000.00 | 2 decimal places |
+| p1 | 1.0% | Percentage with 1 decimal |
+| c1 | $1000.0 | Currency with 1 decimal |
+| c2 | $1000.00 | Currency with 2 decimals |
+
+**Custom Format:**
+```cshtml
+
+
+```
+
+### Grouping Separator
+
+```cshtml
+
+
+
+
+```
+
+---
+
+## 3. DateTime Axis
+
+### Basic DateTime Axis
+
+```cshtml
+
+
+
+
+
+
+
+
+
+
+@code{
+ public class ChartData
+ {
+ public DateTime Date { get; set; }
+ public double Temperature { get; set; }
+ }
+
+ public List WeatherReports = new List
+ {
+ new ChartData { Date = new DateTime(2005, 01, 01), Temperature = 21 },
+ new ChartData { Date = new DateTime(2006, 01, 01), Temperature = 24 },
+ new ChartData { Date = new DateTime(2007, 01, 01), Temperature = 36 }
+ };
+}
+```
+
+### DateTime Category Axis
+Displays date-time values with non-linear intervals.
+
+```cshtml
+
+
+```
+
+### Interval Customization
+
+```cshtml
+
+
+```
+
+**Interval Types:**
+- `Auto`
+- `Years`
+- `Months`
+- `Days`
+- `Hours`
+- `Minutes`
+- `Seconds`
+
+### DateTime Range Padding
+
+**None:**
+```cshtml
+
+
+```
+
+**Round:**
+```cshtml
+
+
+```
+
+**Additional:**
+```cshtml
+
+
+```
+
+### DateTime Label Format
+
+```cshtml
+
+
+```
+
+**Common DateTime Formats:**
+| Format | Example | Description |
+|--------|---------|-------------|
+| EEEE | Monday | Day of week |
+| yMd | 04/10/2000 | Month/Date/Year |
+| MMM | Apr | Short month name |
+| hm | 12:00 AM | Hours:Minutes |
+| hms | 12:00:00 AM | Hours:Minutes:Seconds |
+
+---
+
+## 4. Logarithmic Axis
+
+### Logarithmic Basic Configuration
+
+```cshtml
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code{
+ public List Data = new List
+ {
+ new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 100 },
+ new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 200 },
+ new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 500 },
+ new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 1000 },
+ new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 8000 }
+ };
+}
+```
+
+### Logarithmic Base
+
+```cshtml
+
+
+```
+
+Common bases: 2, 5, 10 (default)
+
+### Logarithmic Interval
+
+```cshtml
+
+
+```
+
+When base is 10 and interval is 2, labels are placed at 10², 10â´, 10â¶, etc.
+
+### Logarithmic Label Format
+
+```cshtml
+
+
+```
+
+**Custom Format:**
+```cshtml
+
+
+```
+
+---
+
+## 5. Axis Customization
+
+### Axis Titles
+
+```cshtml
+
+
+
+
+
+
+
+
+
+```
+
+**Title Alignment Options:**
+- `Alignment.Near`
+- `Alignment.Center`
+- `Alignment.Far`
+
+### Axis Crossing
+
+```cshtml
+
+
+
+
+
+```
+
+**For Multiple Axes:**
+```cshtml
+
+
+
+
+
+
+
+```
+
+### Opposed Position
+
+```cshtml
+
+
+```
+
+Places axis on the opposite side (right for Y-axis, top for X-axis).
+
+### Inversed Axis
+
+```cshtml
+
+
+```
+
+Inverts the axis direction (greatest value near origin).
+
+### Tick Lines
+
+```cshtml
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Grid Lines
+
+```cshtml
+
+
+
+
+
+
+```
+
+---
+
+## 6. Axis Labels
+
+### Smart Axis Labels
+
+**Hide Overlapping Labels:**
+```cshtml
+
+
+```
+
+**Rotate 45 Degrees:**
+```cshtml
+
+
+```
+
+**Rotate 90 Degrees:**
+```cshtml
+
+
+```
+
+### Label Positioning
+
+```cshtml
+
+
+```
+
+**Options:**
+- `AxisPosition.Outside` (default)
+- `AxisPosition.Inside`
+
+### Label Rotation
+
+Handled automatically by `LabelIntersectAction` or can be customized in events.
+
+### Label Trimming
+
+```cshtml
+
+
+```
+
+### Label Wrapping
+
+```cshtml
+
+
+
+
+
+
+
+
+
+
+```
+
+### Edge Label Placement
+
+```cshtml
+
+
+```
+
+**Options:**
+- `None` - Leave as is
+- `Shift` - Move label inside chart area
+- `Hide` - Hide edge labels
+
+### Multilevel Labels
+
+```cshtml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**Border Types:**
+- `Rectangle`
+- `Brace`
+- `WithoutBorder`
+- `WithoutTopBorder`
+- `WithoutTopandBottomBorder`
+- `CurlyBrace`
+
+---
+
+## 7. Multiple Axes
+
+### Secondary Axes
+
+```cshtml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Axis Naming
+
+Each secondary axis requires a unique name specified in the `Name` property:
+
+```cshtml
+
+
+
+
+
+
+```
+
+Bind series to axis using `YAxisName` or `XAxisName`:
+
+```cshtml
+
+
+```
+
+### Multiple Rows and Columns
+
+**Rows:**
+```cshtml
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**Columns:**
+```cshtml
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**Span Across Rows/Columns:**
+```cshtml
+
+
+```
+
+---
+
+## 8. Common Properties
+
+**Essential Axis Properties:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `Minimum` | object | Minimum value for axis range |
+| `Maximum` | object | Maximum value for axis range |
+| `Interval` | double | Spacing between axis labels |
+| `ValueType` | ValueType | Category, Double, DateTime, DateTimeCategory, Logarithmic |
+| `Name` | string | Unique identifier for axis |
+| `Title` | string | Axis title text |
+| `OpposedPosition` | bool | Places axis on opposite side |
+| `IsInversed` | bool | Inverts axis direction |
+| `LabelFormat` | string | Format string for labels |
+| `LabelPlacement` | LabelPlacement | BetweenTicks or OnTicks |
+| `LabelPosition` | AxisPosition | Inside or Outside |
+| `EdgeLabelPlacement` | EdgeLabelPlacement | None, Shift, or Hide |
+| `RangePadding` | ChartRangePadding | None, Round, Additional, Normal, Auto |
+| `EnableTrim` | bool | Enables label trimming |
+| `MaximumLabelWidth` | double | Maximum width for labels |
+| `LabelIntersectAction` | LabelIntersectAction | None, Hide, Rotate45, Rotate90 |
+| `RowIndex` | int | Row index for multi-pane charts |
+| `ColumnIndex` | int | Column index for multi-pane charts |
+| `Span` | int | Number of rows/columns to span |
+
+---
+
+## 9. Best Practices
+
+1. **Choose the Right Axis Type:**
+ - Use Category axis for string labels
+ - Use Numeric axis for continuous numeric data
+ - Use DateTime axis for time-series data
+ - Use Logarithmic axis for data spanning multiple orders of magnitude
+
+2. **Optimize Label Display:**
+ - Use `LabelIntersectAction` to prevent overlapping labels
+ - Set appropriate `MaximumLabelWidth` for long labels
+ - Use `EnableTrim` when labels are too long
+ - Consider `EdgeLabelPlacement="Shift"` for better edge visibility
+
+3. **Range Configuration:**
+ - Set explicit `Minimum` and `Maximum` for consistent scaling
+ - Use appropriate `RangePadding` for better data visibility
+ - Set `Interval` to control label density
+
+4. **Multiple Axes:**
+ - Always provide unique `Name` for secondary axes
+ - Use `OpposedPosition` for better visual separation
+ - Consider using rows/columns for complex multi-axis scenarios
+
+5. **Performance:**
+ - Limit the number of visible labels using `Interval`
+ - Use `RangePadding="None"` when exact range is needed
+ - Avoid excessive multilevel labels
+
+6. **Accessibility:**
+ - Provide meaningful axis titles
+ - Use high-contrast colors for grid lines and labels
+ - Ensure label text is readable (minimum 10px size)
+
+---
+
+## 10. Troubleshooting
+
+**Problem: Labels are overlapping**
+```cshtml
+
+
+```
+
+**Problem: Axis range is too tight**
+```cshtml
+
+
+```
+
+**Problem: Edge labels are cut off**
+```cshtml
+
+
+```
+
+**Problem: Too many labels showing**
+```cshtml
+
+
+```
+
+**Problem: Labels are too long**
+```cshtml
+
+
+```
+
+**Problem: Secondary axis not showing**
+```cshtml
+
+
+
+
+
+
+
+
+
+```
+
+**Problem: Logarithmic axis showing negative values**
+```cshtml
+
+
+
+```
+
+**Problem: DateTime labels not formatted correctly**
+```cshtml
+
+
+```
+
+**Problem: Category axis showing numeric indices**
+```cshtml
+
+
+
+```
+
+---
+
+## Complete Working Example
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class DataPoint
+ {
+ public string Month { get; set; }
+ public double Sales { get; set; }
+ public double Temperature { get; set; }
+ }
+
+ public List SalesData = new List
+ {
+ new DataPoint { Month = "Jan", Sales = 35000, Temperature = 15 },
+ new DataPoint { Month = "Feb", Sales = 28000, Temperature = 17 },
+ new DataPoint { Month = "Mar", Sales = 34000, Temperature = 21 },
+ new DataPoint { Month = "Apr", Sales = 32000, Temperature = 25 },
+ new DataPoint { Month = "May", Sales = 40000, Temperature = 30 },
+ new DataPoint { Month = "Jun", Sales = 32000, Temperature = 35 },
+ new DataPoint { Month = "Jul", Sales = 35000, Temperature = 38 },
+ new DataPoint { Month = "Aug", Sales = 45000, Temperature = 36 },
+ new DataPoint { Month = "Sep", Sales = 38000, Temperature = 32 },
+ new DataPoint { Month = "Oct", Sales = 30000, Temperature = 26 },
+ new DataPoint { Month = "Nov", Sales = 25000, Temperature = 20 },
+ new DataPoint { Month = "Dec", Sales = 42000, Temperature = 16 }
+ };
+}
+```
+
+---
+
+## Summary
+
+This reference guide provides comprehensive coverage of Blazor Chart axes and scales including:
+
+- **4 Axis Types**: Category, Numeric, DateTime, and Logarithmic
+- **Extensive Customization**: Titles, positioning, styling, and behavior
+- **Label Management**: Smart labels, rotation, trimming, and multilevel labels
+- **Multiple Axes Support**: Secondary axes, rows, columns, and spanning
+- **Best Practices**: Optimization tips and common patterns
+- **Troubleshooting**: Solutions to common issues
+
+Use this guide as a quick reference for implementing and customizing chart axes in your Blazor applications.
diff --git a/skills/syncfusion-blazor-toolkit-charts/references/chart-types-common.md b/skills/syncfusion-blazor-toolkit-charts/references/chart-types-common.md
new file mode 100644
index 0000000..b722147
--- /dev/null
+++ b/skills/syncfusion-blazor-toolkit-charts/references/chart-types-common.md
@@ -0,0 +1,724 @@
+# Common Chart Types
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Line Chart](#line-chart)
+ - [Description](#description)
+ - [Basic Implementation](#basic-implementation)
+ - [Customization](#customization)
+ - [Multicolored Line](#multicolored-line)
+- [Area Chart](#area-chart)
+ - [Description](#description)
+ - [Basic Implementation](#basic-implementation)
+ - [Customization](#customization)
+ - [Multicolored Area](#multicolored-area)
+- [Column Chart](#column-chart)
+ - [Description](#description)
+ - [Basic Implementation](#basic-implementation)
+ - [Customization](#customization)
+ - [Rounded Corners](#rounded-corners)
+ - [Grouped Columns](#grouped-columns)
+- [Bar Chart](#bar-chart)
+ - [Description](#description)
+ - [Basic Implementation](#basic-implementation)
+ - [Customization](#customization)
+- [Spline Chart](#spline-chart)
+ - [Description](#description)
+ - [Basic Implementation](#basic-implementation)
+ - [Customization](#customization)
+- [Spline Area Chart](#spline-area-chart)
+ - [Description](#description)
+ - [Basic Implementation](#basic-implementation)
+ - [Customization](#customization)
+- [Step Line Chart](#step-line-chart)
+ - [Description](#description)
+ - [Basic Implementation](#basic-implementation)
+- [Step Area Chart](#step-area-chart)
+ - [Description](#description)
+ - [Basic Implementation](#basic-implementation)
+- [When to Use Each Type](#when-to-use-each-type)
+- [Empty Point Handling](#empty-point-handling)
+- [Common Series Properties](#common-series-properties)
+ - [Fill](#fill)
+ - [Opacity](#opacity)
+ - [Width](#width)
+ - [DashArray](#dasharray)
+ - [Name](#name)
+- [Series Events](#series-events)
+ - [OnSeriesRender](#onseriesrender)
+ - [OnPointRender](#onpointrender)
+- [Multi-Series Example](#multi-series-example)
+- [Performance Tips](#performance-tips)
+- [Troubleshooting](#troubleshooting)
+- [Related Features](#related-features)
+
+
+## Overview
+
+This guide covers the most frequently-used chart types in Syncfusion Blazor Charts. These chart types are ideal for everyday data visualization needs including trends, comparisons, and distributions.
+
+All chart types share common features:
+- Data binding with `DataSource`, `XName`, and `YName` properties
+- Customization via `Fill`, `Opacity`, `Width`, and `DashArray`
+- Empty point handling
+- Series and point render events
+- Support for multiple series
+
+## Line Chart
+
+### Description
+
+Line charts visualize time-dependent data by connecting data points with lines, showing trends at equal intervals. Ideal for displaying continuous data and identifying patterns over time.
+
+### Basic Implementation
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public class ChartData
+ {
+ public string Month { get; set; }
+ public double Sales { get; set; }
+ }
+
+ public List SalesData = new List
+ {
+ new ChartData { Month = "Jan", Sales = 35 },
+ new ChartData { Month = "Feb", Sales = 28 },
+ new ChartData { Month = "Mar", Sales = 34 },
+ new ChartData { Month = "Apr", Sales = 32 },
+ new ChartData { Month = "May", Sales = 40 }
+ };
+}
+```
+
+### Customization
+
+**Line Color and Width:**
+```razor
+
+
+```
+
+**Dashed Line:**
+```razor
+
+
+```
+
+**Gradient Line:**
+```razor
+
+
+
+
+```
+
+### Multicolored Line
+
+Display different colors for each line segment:
+
+```razor
+
+
+
+@code {
+ public class ColoredChartData
+ {
+ public string Month { get; set; }
+ public double Value { get; set; }
+ public string Color { get; set; }
+ }
+
+ public List ColoredData = new List
+ {
+ new ColoredChartData { Month = "Jan", Value = 35, Color = "#1f77b4" },
+ new ColoredChartData { Month = "Feb", Value = 28, Color = "#ff7f0e" },
+ new ColoredChartData { Month = "Mar", Value = 34, Color = "#2ca02c" }
+ };
+}
+```
+
+---
+
+## Area Chart
+
+### Description
+
+Area charts fill the region below the line, emphasizing magnitude and trends over time. Useful for showing cumulative totals or comparing multiple datasets.
+
+### Basic Implementation
+
+```razor
+
+
+
+
+
+
+
+
+```
+
+### Customization
+
+**Fill Color:**
+```razor
+
+
+```
+
+**Border:**
+```razor
+
+
+
+```
+
+**Gradient Fill:**
+```razor
+
+
+
+
+```
+
+### Multicolored Area
+
+```razor
+
+
+
+
+
+
+
+```
+
+---
+
+## Column Chart
+
+### Description
+
+Column charts compare values across categories using vertical bars. Most common chart type for frequency, count, total, or average comparisons.
+
+### Basic Implementation
+
+```razor
+
+
+
+
+
+
+
+
+```
+
+### Customization
+
+**Column Color:**
+```razor
+
+
+```
+
+**Column Spacing and Width:**
+```razor
+
+
+```
+
+**Column Width in Pixels:**
+```razor
+
+
+```
+
+### Rounded Corners
+
+```razor
+
+
+
+```
+
+**Dynamic Corner Radius:**
+```razor
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void PointRender(PointRenderEventArgs args)
+ {
+ if ((args.Point.X as string) == "Jan" || (args.Point.X as string) == "May")
+ {
+ args.CornerRadius.TopLeft = 10;
+ args.CornerRadius.TopRight = 10;
+ }
+ }
+}
+```
+
+### Grouped Columns
+
+Compare multiple series side-by-side:
+
+```razor
+
+
+
+
+
+
+```
+
+---
+
+## Bar Chart
+
+### Description
+
+Bar charts display horizontal bars for comparing categories. Ideal when category names are long or when emphasizing ranking.
+
+### Basic Implementation
+
+```razor
+
+
+
+
+
+
+
+
+```
+
+### Customization
+
+Bar charts support the same customization options as column charts, including:
+- Fill color and gradients
+- Spacing and width (`ColumnSpacing`, `ColumnWidth`, `ColumnWidthInPixel`)
+- Rounded corners (`ChartCornerRadius`)
+- Grouping (`GroupName`)
+
+**Horizontal Bars with Rounded Corners:**
+```razor
+
+
+
+```
+
+---
+
+## Spline Chart
+
+### Description
+
+Spline charts draw smooth curves through data points using cubic spline interpolation. Better for showing trends without sharp angles.
+
+### Basic Implementation
+
+```razor
+
+
+
+
+
+
+
+
+```
+
+### Customization
+
+Spline charts support the same customization as line charts:
+- Line color (`Fill`)
+- Line width (`Width`)
+- Dash patterns (`DashArray`)
+- Opacity
+
+```razor
+
+
+```
+
+---
+
+## Spline Area Chart
+
+### Description
+
+Combines smooth curves of spline charts with filled areas. Shows trends with smooth transitions while emphasizing magnitude.
+
+### Basic Implementation
+
+```razor
+
+
+
+
+
+
+
+
+```
+
+### Customization
+
+Supports area chart customizations:
+- Fill color and opacity
+- Border styling
+- Gradient fills
+
+---
+
+## Step Line Chart
+
+### Description
+
+Step line charts display data as a series of horizontal and vertical line segments, creating a stepped appearance. Ideal for showing data that changes at specific intervals.
+
+### Basic Implementation
+
+```razor
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Step Area Chart
+
+### Description
+
+Step area charts combine stepped lines with filled areas below. Shows discrete changes in values with magnitude emphasis.
+
+### Basic Implementation
+
+```razor
+
+
+
+
+
+
+
+
+```
+
+---
+
+## When to Use Each Type
+
+| Chart Type | Best For | Use Case Examples |
+|-----------|----------|-------------------|
+| **Line** | Continuous data trends over time | Stock prices, temperature changes, website traffic |
+| **Area** | Magnitude and cumulative totals | Revenue over time, resource usage, market share |
+| **Column** | Categorical comparisons | Monthly sales, survey results, product comparisons |
+| **Bar** | Long category names, rankings | Top products, employee performance, country data |
+| **Spline** | Smooth trends without noise | Projected growth, averaged data, forecasts |
+| **Spline Area** | Smooth magnitude visualization | Smooth cumulative data, overlapping datasets |
+| **Step Line** | Discrete interval changes | Inventory levels, rate changes, step functions |
+| **Step Area** | Discrete changes with magnitude | Pricing tiers, capacity levels, state transitions |
+
+---
+
+## Empty Point Handling
+
+All chart types support empty point handling for `null`, `double.NaN`, or `undefined` values:
+
+```razor
+
+
+
+
+
+
+```
+
+**Empty Point Modes:**
+- `Gap` (default) - Leave gap in series
+- `Zero` - Plot as zero value
+- `Average` - Use average of adjacent points
+- `Drop` - Drop the point entirely
+
+---
+
+## Common Series Properties
+
+These properties apply to all common chart types:
+
+### Fill
+Sets the series color:
+```razor
+Fill="blue"
+Fill="url(#gradientId)"
+Fill="#FF6347"
+```
+
+### Opacity
+Controls transparency (0 to 1):
+```razor
+Opacity="0.5"
+```
+
+### Width
+Line/border thickness (for line-based charts):
+```razor
+Width="3"
+```
+
+### DashArray
+Dash pattern for lines:
+```razor
+DashArray="5,5"
+DashArray="10,5,2"
+```
+
+### Name
+Legend label:
+```razor
+Name="Sales 2024"
+```
+
+---
+
+## Series Events
+
+### OnSeriesRender
+
+Customize series before rendering:
+
+```razor
+
+
+@code {
+ public void SeriesRender(SeriesRenderEventArgs args)
+ {
+ args.Fill = "#FF4081";
+ }
+}
+```
+
+### OnPointRender
+
+Customize individual points:
+
+```razor
+
+
+@code {
+ public void PointRender(PointRenderEventArgs args)
+ {
+ // Alternate colors
+ args.Fill = (args.Point.Index % 2 == 0) ? "#009cb8" : "#ff6347";
+ }
+}
+```
+
+---
+
+## Multi-Series Example
+
+Display multiple chart types together:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Performance Tips
+
+1. **Limit Data Points:** For line/spline charts, downsample data beyond 1000 points
+2. **Use Column Width in Pixels:** For fixed-width columns with many categories
+3. **Optimize Empty Points:** Use `Mode="Gap"` for better performance with sparse data
+4. **Batch Updates:** Update data source once rather than per-point modifications
+
+---
+
+## Troubleshooting
+
+**Chart not displaying:**
+- Verify `Type` property is set correctly
+- Check `DataSource` is populated
+- Ensure `XName` and `YName` match data model properties (case-sensitive)
+
+**Lines/columns not visible:**
+- Check `Fill` color isn't transparent
+- Verify `Opacity` isn't set to 0
+- Ensure data values aren't all zeros or nulls
+
+**Spacing issues:**
+- Adjust `ColumnSpacing` (0 to 1 range)
+- Use `ColumnWidth` or `ColumnWidthInPixel` for sizing
+
+---
+
+## Related Features
+
+- Add data markers for point visualization
+- Enable data labels to show values
+- Configure tooltips for interactivity
+- Apply themes for consistent styling
+- Use zooming/panning for large datasets
diff --git a/skills/syncfusion-blazor-toolkit-charts/references/chart-types-specialized.md b/skills/syncfusion-blazor-toolkit-charts/references/chart-types-specialized.md
new file mode 100644
index 0000000..6562b50
--- /dev/null
+++ b/skills/syncfusion-blazor-toolkit-charts/references/chart-types-specialized.md
@@ -0,0 +1,282 @@
+# Specialized Blazor Chart Types Reference
+
+A comprehensive guide to implementing specialized Syncfusion Blazor chart types including stacked, scatter, and bubble charts. This document is self-contained with complete examples and best practices.
+
+## Table of Contents
+
+- [Stacked Charts](#stacked-charts)
+ - [Stacked Area](#stacked-area)
+ - [Stacked Column/Bar](#stacked-columnbar)
+ - [Stacked Line](#stacked-line)
+- [Scatter and Bubble Charts](#scatter-and-bubble-charts)
+ - [Scatter Chart](#scatter-chart)
+ - [Bubble Chart](#bubble-chart)
+- [Vertical Chart Orientation](#vertical-chart-orientation)
+- [Best Practices](#best-practices)
+ - [Empty Point Handling](#empty-point-handling)
+ - [Series Customization Event](#series-customization-event)
+ - [Point Customization Event](#point-customization-event)
+ - [Gradient Fill](#gradient-fill)
+- [Common Properties](#common-properties)
+ - [All Chart Types Support:](#all-chart-types-support)
+ - [Data Binding:](#data-binding)
+- [Quick Reference](#quick-reference)
+
+
+## Stacked Charts
+
+### Stacked Area
+
+**Overview**: Shows contribution of multiple series to total over time.
+
+**Multi-Series Implementation**:
+```cshtml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class StackedData
+ {
+ public double Year { get; set; }
+ public double ProductA { get; set; }
+ public double ProductB { get; set; }
+ public double ProductC { get; set; }
+ }
+
+ public List RevenueData = new List
+ {
+ new StackedData { Year = 2020, ProductA = 0.61, ProductB = 0.03, ProductC = 0.48 },
+ new StackedData { Year = 2021, ProductA = 0.81, ProductB = 0.05, ProductC = 0.53 },
+ new StackedData { Year = 2022, ProductA = 0.91, ProductB = 0.06, ProductC = 0.57 }
+ };
+}
+```
+
+**Stack Labels**: Display cumulative totals with `ChartStackLabelSettings`
+
+---
+
+### Stacked Column/Bar
+
+**Similar to Stacked Area but with columns/bars**:
+```cshtml
+
+
+```
+
+---
+
+### Stacked Line
+
+```cshtml
+
+```
+
+---
+
+## Scatter and Bubble Charts
+
+### Scatter Chart
+
+**Overview**: Plots individual data points to show correlation between two variables.
+
+```cshtml
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+### Bubble Chart
+
+**Overview**: Three-dimensional scatter chart where bubble size represents third parameter.
+
+**Data Requirements**: XName, YName, Size
+
+```cshtml
+
+
+
+
+
+
+
+@code {
+ public class BubbleData
+ {
+ public double LiteracyRate { get; set; }
+ public double GrowthRate { get; set; }
+ public double Population { get; set; }
+ public string Country { get; set; }
+ }
+
+ public List PopulationData = new List
+ {
+ new BubbleData { LiteracyRate = 92.2, GrowthRate = 7.8, Population = 1.347, Country = "China" },
+ new BubbleData { LiteracyRate = 74, GrowthRate = 6.5, Population = 1.241, Country = "India" }
+ };
+}
+```
+
+---
+
+## Vertical Chart Orientation
+
+**Apply to any chart type**:
+```cshtml
+
+
+
+
+
+```
+
+---
+
+## Best Practices
+
+### Empty Point Handling
+```cshtml
+
+
+
+```
+
+### Series Customization Event
+```cshtml
+
+
+@code {
+ void SeriesRender(SeriesRenderEventArgs args)
+ {
+ args.Fill = "#FF4081";
+ }
+}
+```
+
+### Point Customization Event
+```cshtml
+
+
+@code {
+ void PointRender(PointRenderEventArgs args)
+ {
+ args.Fill = (args.Point.Index % 2 != 0) ? "#ff6347" : "#009cb8";
+ }
+}
+```
+
+### Gradient Fill
+```cshtml
+
+
+
+```
+
+---
+
+## Common Properties
+
+### All Chart Types Support:
+- **Fill**: Series color
+- **Opacity**: Transparency (0-1)
+- **DashArray**: Border pattern
+- **ChartSeriesBorder**: Border width and color
+- **ChartMarker**: Data point markers
+- **ChartDataLabel**: Label customization
+- **ChartEmptyPointSettings**: Handling null values
+
+### Data Binding:
+- Use `DataSource` property
+- Map fields with `XName`, `YName`, `High`, `Low`, etc.
+- Supports `SfDataManager` for remote data
+
+---
+
+## Quick Reference
+
+| Chart Type | Data Fields | Use Case |
+|------------|-------------|----------|
+| Stacked Area | X, Y (multiple) | Contribution analysis |
+| Scatter | X, Y | Correlation |
+| Bubble | X, Y, Size | 3D relationships |
+
+---
+
+**Document Version**: 1.0
+**Last Updated**: March 2026
+**Total Lines**: ~390
diff --git a/skills/syncfusion-blazor-toolkit-charts/references/data-handling.md b/skills/syncfusion-blazor-toolkit-charts/references/data-handling.md
new file mode 100644
index 0000000..af670ce
--- /dev/null
+++ b/skills/syncfusion-blazor-toolkit-charts/references/data-handling.md
@@ -0,0 +1,883 @@
+## Table of Contents
+
+- [1. Data Binding](#1-data-binding)
+ - [Basic Data Binding with List](#basic-data-binding-with-listt)
+ - [IEnumerable Data Binding](#ienumerable-data-binding)
+ - [Multiple Series with Different Data Sources](#multiple-series-with-different-data-sources)
+- [2. DataManager Integration](#2-datamanager-integration)
+ - [Remote Data Binding](#remote-data-binding)
+ - [Local DataManager with Query](#local-datamanager-with-query)
+ - [Custom DataManager with Filtering](#custom-datamanager-with-filtering)
+- [3. Dynamic Data Updates](#3-dynamic-data-updates)
+ - [Adding Data Points Dynamically](#adding-data-points-dynamically)
+ - [Removing Data Points](#removing-data-points)
+ - [Updating Existing Data](#updating-existing-data)
+ - [Replacing Entire Dataset](#replacing-entire-dataset)
+- [4. Data Editing](#4-data-editing)
+ - [Enable Inline Data Editing](#enable-inline-data-editing)
+ - [Data Editing with Drag and Drop](#data-editing-with-drag-and-drop)
+- [5. Sorting](#5-sorting)
+ - [Sort by X-Axis (Ascending)](#sort-by-x-axis-ascending)
+ - [Sort by Y-Axis (Descending)](#sort-by-y-axis-descending)
+ - [Programmatic Sorting](#programmatic-sorting)
+- [6. Empty Points Handling](#6-empty-points-handling)
+ - [Null Value Handling](#null-value-handling)
+ - [Average Mode for Empty Points](#average-mode-for-empty-points)
+ - [Zero Mode for Empty Points](#zero-mode-for-empty-points)
+ - [Drop Mode (Skip Empty Points)](#drop-mode-skip-empty-points)
+- [7. Data Serialization](#7-data-serialization)
+ - [JSON Data Binding](#json-data-binding)
+ - [Deserialize from API Response](#deserialize-from-api-response)
+ - [Complex JSON Structure](#complex-json-structure)
+- [8. Live/Real-time Data](#8-livereal-time-data)
+ - [Continuous Data Updates with Timer](#continuous-data-updates-with-timer)
+ - [SignalR Real-time Updates](#signalr-real-time-updates)
+- [9. Performance Tips for Large Datasets](#9-performance-tips-for-large-datasets)
+ - [Virtual Scrolling Pattern](#virtual-scrolling-pattern)
+ - [Lazy Loading Pattern](#lazy-loading-pattern)
+ - [Data Aggregation for Performance](#data-aggregation-for-performance)
+ - [Disable Animations for Large Datasets](#disable-animations-for-large-datasets)
+- [Best Practices](#best-practices)
+- [Common Pitfalls](#common-pitfalls)
+
+# Blazor Chart Data Handling Reference
+
+Complete guide to data handling, binding, manipulation, and optimization patterns for Syncfusion Blazor Charts.
+
+---
+
+## 1. Data Binding
+
+### Basic Data Binding with List
+
+```razor
+@using Syncfusion.Blazor.Charts
+
+
+
+
+
+
+
+
+@code {
+ public class SalesData
+ {
+ public string Month { get; set; }
+ public double Sales { get; set; }
+ }
+
+ private List salesData = new List
+ {
+ new SalesData { Month = "Jan", Sales = 35 },
+ new SalesData { Month = "Feb", Sales = 28 },
+ new SalesData { Month = "Mar", Sales = 34 },
+ new SalesData { Month = "Apr", Sales = 32 },
+ new SalesData { Month = "May", Sales = 40 }
+ };
+}
+```
+
+### IEnumerable Data Binding
+
+```razor
+
+
+
+
+
+
+@code {
+ public class ChartPoint
+ {
+ public double X { get; set; }
+ public double Y { get; set; }
+ }
+
+ private IEnumerable GetChartData()
+ {
+ return Enumerable.Range(1, 10).Select(i => new ChartPoint
+ {
+ X = i,
+ Y = Math.Sin(i * 0.5) * 100
+ });
+ }
+}
+```
+
+### Multiple Series with Different Data Sources
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ private List actualData = new List();
+ private List forecastData = new List();
+
+ protected override void OnInitialized()
+ {
+ actualData = GenerateData(DateTime.Now.AddMonths(-6), 180);
+ forecastData = GenerateData(DateTime.Now, 90);
+ }
+
+ private List GenerateData(DateTime startDate, int days)
+ {
+ var data = new List();
+ for (int i = 0; i < days; i++)
+ {
+ data.Add(new DataPoint
+ {
+ Date = startDate.AddDays(i),
+ Value = 50 + (i * 0.5) + (new Random().NextDouble() * 10)
+ });
+ }
+ return data;
+ }
+
+ public class DataPoint
+ {
+ public DateTime Date { get; set; }
+ public double Value { get; set; }
+ }
+}
+```
+
+---
+
+## 2. DataManager Integration
+
+### Remote Data Binding
+
+```razor
+@using Syncfusion.Blazor.Charts
+@using Syncfusion.Blazor.Data
+
+
+
+
+
+
+
+
+
+```
+
+### Local DataManager with Query
+
+```razor
+@using Syncfusion.Blazor.Data
+
+
+
+
+
+
+
+
+
+@code {
+ private object[] products = new object[]
+ {
+ new { Category = "Electronics", Amount = 150 },
+ new { Category = "Clothing", Amount = 120 },
+ new { Category = "Food", Amount = 90 },
+ new { Category = "Books", Amount = 60 }
+ };
+}
+```
+
+### Custom DataManager with Filtering
+
+```razor
+
+
+
+
+
+ @{
+ var query = new Syncfusion.Blazor.Data.Query()
+ .Where("Value", "greaterthan", 50)
+ .Take(10);
+ }
+
+
+
+
+
+
+@code {
+ private List allData = new List();
+
+ protected override void OnInitialized()
+ {
+ allData = Enumerable.Range(1, 50).Select(i => new DataItem
+ {
+ Name = $"Item {i}",
+ Value = new Random().Next(20, 100)
+ }).ToList();
+ }
+
+ public class DataItem
+ {
+ public string Name { get; set; }
+ public double Value { get; set; }
+ }
+}
+```
+
+---
+
+## 3. Dynamic Data Updates
+
+### Adding Data Points Dynamically
+
+```razor
+
+
+
+
+
+
+
+
+@code {
+ private SfChart chart;
+ private List chartData = new List();
+ private int counter = 0;
+
+ protected override void OnInitialized()
+ {
+ for (int i = 0; i < 10; i++)
+ {
+ chartData.Add(new TimeSeriesData { Time = i, Value = i * 10 });
+ }
+ counter = 10;
+ }
+
+ private async Task AddDataPoint()
+ {
+ chartData.Add(new TimeSeriesData { Time = counter, Value = counter * 10 + new Random().Next(-5, 5) });
+ counter++;
+ await chart.RefreshAsync();
+ }
+
+ public class TimeSeriesData
+ {
+ public int Time { get; set; }
+ public double Value { get; set; }
+ }
+}
+```
+
+### Removing Data Points
+
+```razor
+
+
+
+@code {
+ private async Task RemoveLastPoint()
+ {
+ if (chartData.Any())
+ {
+ chartData.RemoveAt(chartData.Count - 1);
+ await chart.RefreshAsync();
+ }
+ }
+
+ private async Task RemoveByCondition()
+ {
+ chartData.RemoveAll(d => d.Value < 50);
+ await chart.RefreshAsync();
+ }
+}
+```
+
+### Updating Existing Data
+
+```razor
+
+
+
+@code {
+ private async Task UpdateRandomPoint()
+ {
+ if (chartData.Any())
+ {
+ var random = new Random();
+ var index = random.Next(chartData.Count);
+ chartData[index].Value = random.Next(10, 100);
+ await chart.RefreshAsync();
+ }
+ }
+
+ private async Task UpdateAllValues()
+ {
+ foreach (var item in chartData)
+ {
+ item.Value *= 2;
+ }
+ await chart.RefreshAsync();
+ }
+}
+```
+
+### Replacing Entire Dataset
+
+```razor
+
+
+@code {
+ private async Task LoadNewDataset()
+ {
+ chartData.Clear();
+ var random = new Random();
+ for (int i = 0; i < 20; i++)
+ {
+ chartData.Add(new TimeSeriesData { Time = i, Value = random.Next(50, 150) });
+ }
+ await chart.RefreshAsync();
+ }
+}
+```
+
+---
+
+## 4. Data Editing
+
+### Enable Inline Data Editing
+
+```razor
+
+
+
+
+
+
+
+
+@code {
+ public class EditablePoint
+ {
+ public string X { get; set; }
+ public double Y { get; set; }
+ }
+
+ private List editableData = new List
+ {
+ new EditablePoint { X = "A", Y = 20 },
+ new EditablePoint { X = "B", Y = 30 },
+ new EditablePoint { X = "C", Y = 25 }
+ };
+}
+```
+
+### Data Editing with Drag and Drop
+
+```razor
+
+
+
+
+
+
+
+
+
+Last Edit: @lastEditMessage
+
+@code {
+ private string lastEditMessage = "None";
+ private List dragData = new List
+ {
+ new SalesData { Month = "Jan", Sales = 35 },
+ new SalesData { Month = "Feb", Sales = 28 },
+ new SalesData { Month = "Mar", Sales = 34 }
+ };
+
+ private void HandleDragComplete(IDragCompleteEventArgs args)
+ {
+ lastEditMessage = $"Point {args.X} updated to value {args.Y}";
+ }
+}
+```
+
+---
+
+## 5. Sorting
+
+### Sort by X-Axis (Ascending)
+
+```razor
+
+
+
+
+
+
+
+
+@code {
+ private List unsortedData = new List
+ {
+ new CategoryData { Category = "Zebra", Value = 45 },
+ new CategoryData { Category = "Apple", Value = 30 },
+ new CategoryData { Category = "Mango", Value = 60 }
+ };
+
+ public class CategoryData
+ {
+ public string Category { get; set; }
+ public double Value { get; set; }
+ }
+}
+```
+
+### Sort by Y-Axis (Descending)
+
+```razor
+
+
+
+
+
+
+
+
+@code {
+ private List salesByRegion = new List
+ {
+ new RegionSales { Region = "North", Revenue = 120 },
+ new RegionSales { Region = "South", Revenue = 200 },
+ new RegionSales { Region = "East", Revenue = 150 },
+ new RegionSales { Region = "West", Revenue = 180 }
+ };
+
+ public class RegionSales
+ {
+ public string Region { get; set; }
+ public double Revenue { get; set; }
+ }
+}
+```
+
+### Programmatic Sorting
+
+```razor
+
+
+
+@code {
+ private void SortAscending()
+ {
+ salesByRegion = salesByRegion.OrderBy(x => x.Revenue).ToList();
+ StateHasChanged();
+ }
+
+ private void SortDescending()
+ {
+ salesByRegion = salesByRegion.OrderByDescending(x => x.Revenue).ToList();
+ StateHasChanged();
+ }
+}
+```
+
+---
+
+## 6. Empty Points Handling
+
+### Null Value Handling
+
+```razor
+
+
+
+
+
+
+
+
+@code {
+ public class DataWithNulls
+ {
+ public int X { get; set; }
+ public double? Y { get; set; }
+ }
+
+ private List dataWithNulls = new List
+ {
+ new DataWithNulls { X = 1, Y = 20 },
+ new DataWithNulls { X = 2, Y = null },
+ new DataWithNulls { X = 3, Y = 30 },
+ new DataWithNulls { X = 4, Y = null },
+ new DataWithNulls { X = 5, Y = 40 }
+ };
+}
+```
+
+### Average Mode for Empty Points
+
+```razor
+
+
+
+```
+
+### Zero Mode for Empty Points
+
+```razor
+
+
+
+```
+
+### Drop Mode (Skip Empty Points)
+
+```razor
+
+
+
+
+```
+
+---
+
+## 7. Data Serialization
+
+
+
+### Deserialize from API Response
+
+```razor
+@inject HttpClient Http
+
+@code {
+ protected override async Task OnInitializedAsync()
+ {
+ var response = await Http.GetStringAsync("api/chartdata");
+ jsonData = JsonSerializer.Deserialize>(response);
+ }
+}
+```
+
+### Complex JSON Structure
+
+```razor
+@code {
+ protected override void OnInitialized()
+ {
+ string complexJson = @"{
+ ""sales"": [
+ { ""month"": ""Jan"", ""revenue"": 45000, ""costs"": 30000 },
+ { ""month"": ""Feb"", ""revenue"": 52000, ""costs"": 32000 }
+ ]
+ }";
+
+ var jsonDoc = JsonDocument.Parse(complexJson);
+ var salesArray = jsonDoc.RootElement.GetProperty("sales");
+
+ complexData = JsonSerializer.Deserialize>(salesArray.GetRawText());
+ }
+
+ private List complexData = new List();
+
+ public class ComplexData
+ {
+ public string Month { get; set; }
+ public double Revenue { get; set; }
+ public double Costs { get; set; }
+ }
+}
+```
+
+---
+
+## 8. Live/Real-time Data
+
+### Continuous Data Updates with Timer
+
+```razor
+@implements IDisposable
+
+
+
+
+
+
+
+
+
+@code {
+ private SfChart liveChart;
+ private List liveData = new List();
+ private System.Threading.Timer timer;
+ private int timeCounter = 0;
+ private Random random = new Random();
+
+ protected override void OnInitialized()
+ {
+ // Initialize with some data
+ for (int i = 0; i < 20; i++)
+ {
+ liveData.Add(new LiveDataPoint { Time = i, Value = 50 + random.Next(-10, 10) });
+ }
+ timeCounter = 20;
+
+ // Start live updates every 1 second
+ timer = new System.Threading.Timer(async _ => await UpdateLiveData(), null, 1000, 1000);
+ }
+
+ private async Task UpdateLiveData()
+ {
+ await InvokeAsync(async () =>
+ {
+ // Add new point
+ liveData.Add(new LiveDataPoint
+ {
+ Time = timeCounter++,
+ Value = liveData.Last().Value + random.Next(-5, 5)
+ });
+
+ // Keep only last 50 points
+ if (liveData.Count > 50)
+ {
+ liveData.RemoveAt(0);
+ }
+
+ await liveChart.RefreshAsync();
+ });
+ }
+
+ public void Dispose()
+ {
+ timer?.Dispose();
+ }
+
+ public class LiveDataPoint
+ {
+ public int Time { get; set; }
+ public double Value { get; set; }
+ }
+}
+```
+
+### SignalR Real-time Updates
+
+```razor
+@using Microsoft.AspNetCore.SignalR.Client
+@implements IAsyncDisposable
+
+
+
+
+
+
+
+@code {
+ private SfChart signalChart;
+ private HubConnection hubConnection;
+ private List signalData = new List();
+
+ protected override async Task OnInitializedAsync()
+ {
+ hubConnection = new HubConnectionBuilder()
+ .WithUrl("https://yourserver.com/stockhub")
+ .Build();
+
+ hubConnection.On("ReceiveStockUpdate", async (stockPrice) =>
+ {
+ signalData.Add(stockPrice);
+ if (signalData.Count > 100) signalData.RemoveAt(0);
+ await signalChart.RefreshAsync();
+ StateHasChanged();
+ });
+
+ await hubConnection.StartAsync();
+ }
+
+ public async ValueTask DisposeAsync()
+ {
+ if (hubConnection != null)
+ {
+ await hubConnection.DisposeAsync();
+ }
+ }
+
+ public class StockPrice
+ {
+ public DateTime Timestamp { get; set; }
+ public double Price { get; set; }
+ }
+}
+```
+
+---
+
+## 9. Performance Tips for Large Datasets
+
+### Virtual Scrolling Pattern
+
+```razor
+
+
+
+
+
+
+
+
+
+
+@code {
+ private List largeDataset = new List();
+
+ protected override void OnInitialized()
+ {
+ // Generate 10,000 data points
+ var startDate = DateTime.Now.AddDays(-10000);
+ for (int i = 0; i < 10000; i++)
+ {
+ largeDataset.Add(new LargeDataPoint
+ {
+ Date = startDate.AddDays(i),
+ Value = 100 + (Math.Sin(i * 0.1) * 50)
+ });
+ }
+ }
+
+ public class LargeDataPoint
+ {
+ public DateTime Date { get; set; }
+ public double Value { get; set; }
+ }
+}
+```
+
+### Lazy Loading Pattern
+
+```razor
+
+
+
+
+
+
+
+@code {
+ private List visibleData = new List();
+ private int currentIndex = 0;
+ private const int chunkSize = 100;
+
+ protected override void OnInitialized()
+ {
+ LoadNextChunk();
+ }
+
+ private void LoadNextChunk()
+ {
+ for (int i = 0; i < chunkSize; i++)
+ {
+ visibleData.Add(new DataPoint
+ {
+ Index = currentIndex++,
+ Value = new Random().NextDouble() * 100
+ });
+ }
+ }
+
+ private void HandleScrollEnd(ScrollEventArgs args)
+ {
+ // Load more data when user scrolls to the end
+ LoadNextChunk();
+ StateHasChanged();
+ }
+
+ public class DataPoint
+ {
+ public int Index { get; set; }
+ public double Value { get; set; }
+ }
+}
+```
+
+### Data Aggregation for Performance
+
+```razor
+@code {
+ private List AggregateData(List rawData, int groupSize)
+ {
+ return rawData
+ .Select((point, index) => new { point, index })
+ .GroupBy(x => x.index / groupSize)
+ .Select(group => new AggregatedData
+ {
+ GroupIndex = group.Key,
+ AverageValue = group.Average(x => x.point.Value),
+ MaxValue = group.Max(x => x.point.Value),
+ MinValue = group.Min(x => x.point.Value)
+ })
+ .ToList();
+ }
+
+ public class RawDataPoint
+ {
+ public double Value { get; set; }
+ }
+
+ public class AggregatedData
+ {
+ public int GroupIndex { get; set; }
+ public double AverageValue { get; set; }
+ public double MaxValue { get; set; }
+ public double MinValue { get; set; }
+ }
+}
+```
+
+### Disable Animations for Large Datasets
+
+```razor
+
+
+
+
+```
+
+---
+
+## Best Practices
+
+1. **Use appropriate data structures**: List for mutable data, IEnumerable for read-only scenarios
+2. **Call RefreshAsync() after data updates**: Ensures chart reflects changes
+3. **Disable animations for real-time data**: Improves performance
+4. **Limit visible data points**: Use scrolling/zooming for large datasets (>1000 points)
+5. **Use DataManager for remote data**: Built-in adapters for API integration
+6. **Handle null values explicitly**: Use EmptyPointSettings to control behavior
+7. **Implement INotifyPropertyChanged**: For automatic updates on property changes
+8. **Dispose timers and connections**: Prevent memory leaks in real-time scenarios
+9. **Aggregate data when possible**: Reduce points while maintaining trends
+10. **Test with production data volumes**: Performance varies with data size
+
+---
+
+## Common Pitfalls
+
+- **Forgetting to call RefreshAsync()**: Chart won't update after data changes
+- **Not disposing timers**: Memory leaks in live data scenarios
+- **Enabling animations with frequent updates**: Causes performance issues
+- **Binding to properties instead of collections**: Use ObservableCollection or call StateHasChanged()
+- **Not handling empty/null data**: Can cause rendering errors
+- **Excessive data points without optimization**: Browser performance degradation
+
+---
+
+**Last Updated**: March 2026
+**Version**: 1.0
+**Syncfusion Blazor Charts**: v25.x+
diff --git a/skills/syncfusion-blazor-toolkit-charts/references/events.md b/skills/syncfusion-blazor-toolkit-charts/references/events.md
new file mode 100644
index 0000000..cc20cde
--- /dev/null
+++ b/skills/syncfusion-blazor-toolkit-charts/references/events.md
@@ -0,0 +1,1126 @@
+# Syncfusion Blazor Charts - Events Reference
+
+Comprehensive reference guide for all chart events organized by category.
+
+## Table of Contents
+
+- [Chart Lifecycle Events](#chart-lifecycle-events)
+ - [OnChartLoaded (Loaded)](#onchartloaded-loaded)
+ - [SizeChanged](#sizechanged)
+- [Mouse and Touch Events](#mouse-and-touch-events)
+ - [ChartMouseMove](#chartmousemove)
+ - [ChartMouseClick](#chartmouseclick)
+ - [ChartMouseDown](#chartmousedown)
+ - [ChartMouseUp](#chartmouseup)
+ - [ChartMouseLeave](#chartmouseleave)
+ - [PointClick (OnPointClick)](#pointclick-onpointclick)
+ - [PointMove](#pointmove)
+- [Rendering Events](#rendering-events)
+ - [OnPointRender](#onpointrender)
+ - [OnDataLabelRender](#ondatalabelrender)
+ - [OnAxisLabelRender](#onaxislabelrender)
+ - [OnLegendItemRender](#onlegenditemrender)
+ - [OnSeriesRender](#onseriesrender)
+- [Interactive Events](#interactive-events)
+ - [OnSelectionChanged](#onselectionchanged)
+ - [OnLegendClick](#onlegendclick)
+ - [OnAxisLabelClick](#onaxislabelclick)
+ - [OnDataEdit](#ondataedit)
+ - [OnDataEditCompleted](#ondataeditcompleted)
+- [Zoom and Scroll Events](#zoom-and-scroll-events)
+ - [OnZoomStart](#onzoomstart)
+ - [OnZoomEnd](#onzoomend)
+ - [OnScrollChanged](#onscrollchanged)
+- [Export and Print Events](#export-and-print-events)
+ - [OnExportComplete](#onexportcomplete)
+ - [OnPrintComplete](#onprintcomplete)
+- [Axis Events](#axis-events)
+ - [OnAxisActualRangeCalculated](#onaxisactualrangecalculated)
+ - [OnAxisMultiLevelLabelRender](#onaxismultilevellabelrender)
+ - [OnMultiLevelLabelClick](#onmultilevellabelclick)
+- [Additional Events](#additional-events)
+ - [TooltipRender](#tooltiprender)
+ - [SharedTooltipRender](#sharedtooltiprender)
+
+
+## Chart Lifecycle Events
+
+### OnChartLoaded (Loaded)
+
+Triggers after the chart has completed loading.
+
+**EventArgs**: `LoadedEventArgs`
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnChartLoadedHandler(LoadedEventArgs args)
+ {
+ // Initialize chart-dependent operations
+ }
+}
+```
+
+**Use Cases**:
+- Initialize chart-dependent operations
+- Trigger data refresh after chart initialization
+- Set up external integrations
+
+### SizeChanged
+
+Triggers when the chart is resized.
+
+**EventArgs**: `ResizeEventArgs`
+- `CurrentSize` - Current size of the chart
+- `PreviousSize` - Previous size of the chart
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnSizeChangedHandler(ResizeEventArgs args)
+ {
+ Console.WriteLine($"Resized from {args.PreviousSize.Width}x{args.PreviousSize.Height} to {args.CurrentSize.Width}x{args.CurrentSize.Height}");
+ }
+}
+```
+
+**Use Cases**:
+- Responsive layout adjustments
+- Recalculate chart dimensions for adaptive displays
+- Log resize events for analytics
+
+---
+
+## Mouse and Touch Events
+
+### ChartMouseMove
+
+Triggers when the mouse moves over the chart area.
+
+**EventArgs**: `ChartMouseEventArgs`
+- `MouseX` - Current mouse X coordinate
+- `MouseY` - Current mouse Y coordinate
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnMouseMoveHandler(ChartMouseEventArgs args)
+ {
+ // Display coordinates in a custom tooltip or status bar
+ Console.WriteLine($"Mouse at X: {args.MouseX}, Y: {args.MouseY}");
+ }
+}
+```
+
+**Use Cases**:
+- Custom cursor tracking
+- Display real-time coordinates
+- Implement custom hover effects
+
+### ChartMouseClick
+
+Triggers when the chart is clicked.
+
+**EventArgs**: `ChartMouseEventArgs`
+- `MouseX` - Current mouse X coordinate
+- `MouseY` - Current mouse Y coordinate
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnChartClickHandler(ChartMouseEventArgs args)
+ {
+ // Handle chart background clicks
+ Console.WriteLine("Chart clicked");
+ }
+}
+```
+
+**Use Cases**:
+- Clear selections on background click
+- Show chart-level context menus
+- Reset zoom/pan on click
+
+### ChartMouseDown
+
+Triggers when the mouse button is pressed on the chart.
+
+**EventArgs**: `ChartMouseEventArgs`
+- `MouseX` - Current mouse X coordinate
+- `MouseY` - Current mouse Y coordinate
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnMouseDownHandler(ChartMouseEventArgs args)
+ {
+ // Capture mouse down for custom drag operations
+ }
+}
+```
+
+**Use Cases**:
+- Custom drag operations
+- Selection box initialization
+- Custom annotation placement
+
+### ChartMouseUp
+
+Triggers when the mouse button is released over the chart.
+
+**EventArgs**: `ChartMouseEventArgs`
+- `MouseX` - Current mouse X coordinate
+- `MouseY` - Current mouse Y coordinate
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnMouseUpHandler(ChartMouseEventArgs args)
+ {
+ // Complete drag operation
+ }
+}
+```
+
+**Use Cases**:
+- Complete custom drag operations
+- Finalize selection boxes
+- Save annotation positions
+
+### ChartMouseLeave
+
+Triggers when the mouse leaves the chart area. This event has no specific arguments.
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnMouseLeaveHandler()
+ {
+ // Hide custom tooltips
+ }
+}
+```
+
+**Use Cases**:
+- Hide custom tooltips or overlays
+- Reset hover states
+- Clean up temporary UI elements
+
+### PointClick (OnPointClick)
+
+Triggers when a data point is clicked.
+
+**EventArgs**: `PointEventArgs`
+- `Chart` - Current chart instance
+- `Point` - Clicked data point
+- `PointIndex` - Index of the clicked point
+- `Series` - Series containing the point
+- `SeriesIndex` - Index of the series
+- `PageX` - Window page X location
+- `PageY` - Window page Y location
+- `X` - X coordinate of click
+- `Y` - Y coordinate of click
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnPointClickHandler(PointEventArgs args)
+ {
+ Console.WriteLine($"Clicked: {args.Point.X} - {args.Point.Y}");
+ // Navigate to detail view or show modal
+ }
+}
+```
+
+**Use Cases**:
+- Navigate to detail views
+- Display point-specific modals
+- Trigger data updates
+
+### PointMove
+
+Triggers when the mouse hovers over a data point. Uses the same `PointEventArgs` as PointClick.
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnPointMoveHandler(PointEventArgs args)
+ {
+ // Highlight related data or show additional info
+ }
+}
+```
+
+**Use Cases**:
+- Custom hover effects
+- Display additional point information
+- Highlight related data points
+
+---
+
+## Rendering Events
+
+### OnPointRender
+
+Triggers before each data point is rendered.
+
+**EventArgs**: `PointRenderEventArgs`
+- `Border` - Point border color and width
+- `CornerRadius` - Corner radius for rectangular series
+- `Fill` - Point fill color
+- `Height` - Point height
+- `Width` - Point width
+- `Shape` - Marker shape
+- `Point` - Current data point
+- `Series` - Current series
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnPointRenderHandler(PointRenderEventArgs args)
+ {
+ // Color points based on value
+ if ((double)args.Point.Y < 30)
+ args.Fill = "#FF0000";
+ else if ((double)args.Point.Y > 50)
+ args.Fill = "#00FF00";
+ }
+}
+```
+
+**Use Cases**:
+- Conditional point coloring
+- Dynamic shape assignment
+- Apply custom styling based on data
+
+### OnDataLabelRender
+
+Triggers before data labels are rendered.
+
+**EventArgs**: `TextRenderEventArgs`
+- `Border` - Label border settings
+- `Color` - Label text color
+- `Font` - Font settings
+- `Template` - Template data
+- `Text` - Label text
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnDataLabelRenderHandler(TextRenderEventArgs args)
+ {
+ // Format labels with custom prefix/suffix
+ args.Text = "$" + args.Text + "K";
+ args.Color = "#333333";
+ }
+}
+```
+
+**Use Cases**:
+- Format label text with units or currency
+- Apply conditional styling to labels
+- Customize label appearance
+
+### OnAxisLabelRender
+
+Triggers before axis labels are rendered.
+
+**EventArgs**: `AxisLabelRenderEventArgs`
+- `LabelStyle` - Font settings for the label
+- `Text` - Label text
+- `Value` - Label value
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnAxisLabelRenderHandler(AxisLabelRenderEventArgs args)
+ {
+ // Abbreviate month names
+ if (args.Text.Length > 3)
+ args.Text = args.Text.Substring(0, 3);
+ }
+}
+```
+
+**Use Cases**:
+- Format axis labels
+- Abbreviate long labels
+- Apply custom number formatting
+
+### OnLegendItemRender
+
+Triggers before legend items are rendered.
+
+**EventArgs**: `LegendRenderEventArgs`
+- `Fill` - Legend icon fill color
+- `MarkerShape` - Marker shape
+- `Shape` - Legend icon shape
+- `Text` - Legend text
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnLegendRenderHandler(LegendRenderEventArgs args)
+ {
+ // Customize legend text
+ args.Text = args.Text.ToUpper();
+ }
+}
+```
+
+**Use Cases**:
+- Customize legend text
+- Change legend icon shapes
+- Apply custom legend styling
+
+### OnSeriesRender
+
+Triggers before each series is rendered. This event allows customization of series appearance before rendering.
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnSeriesRenderHandler()
+ {
+ // Apply series-level customization
+ }
+}
+```
+
+**Use Cases**:
+- Apply conditional series styling
+- Modify series properties before render
+- Dynamic series configuration
+
+---
+
+## Interactive Events
+
+### OnSelectionChanged
+
+Triggers after point, series, or cluster selection is completed.
+
+**EventArgs**: `SelectionCompleteEventArgs`
+- `SelectedDataValues` - Collection of selected data X and Y values
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnSelectionChangedHandler(SelectionCompleteEventArgs args)
+ {
+ Console.WriteLine($"Selected {args.SelectedDataValues.Count} points");
+ // Update related components based on selection
+ }
+}
+```
+
+**Use Cases**:
+- Filter related data based on selection
+- Update dashboards with selected data
+- Enable/disable actions based on selection
+
+### OnLegendClick
+
+Triggers when a legend item is clicked.
+
+**EventArgs**: `LegendClickEventArgs`
+- `LegendShape` - Shape of the legend item
+- `LegendText` - Text of the legend item
+- `Series` - Associated series
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnLegendClickHandler(LegendClickEventArgs args)
+ {
+ Console.WriteLine($"Clicked legend: {args.LegendText}");
+ // Toggle series visibility or filter data
+ }
+}
+```
+
+**Use Cases**:
+- Custom legend toggle behavior
+- Filter data by series
+- Track legend interactions
+
+### OnAxisLabelClick
+
+Triggers when an axis label is clicked.
+
+**EventArgs**: `AxisLabelClickEventArgs`
+- `Axis` - Current axis
+- `Chart` - Chart instance
+- `Index` - Label index
+- `LabelID` - Label element ID
+- `Location` - Label location
+- `Text` - Label text
+- `Value` - Label value
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnAxisLabelClickHandler(AxisLabelClickEventArgs args)
+ {
+ Console.WriteLine($"Clicked axis label: {args.Text}");
+ // Filter data by category or drill down
+ }
+}
+```
+
+**Use Cases**:
+- Drill-down navigation by category
+- Filter data by axis label
+- Show category-specific details
+
+### OnDataEdit
+
+Triggers while dragging a data point (when data editing is enabled).
+
+**EventArgs**: `DataEditingEventArgs`
+- `NewValue` - New value of the point
+- `OldValue` - Previous value of the point
+- `Point` - Current point being edited
+- `PointIndex` - Index of the point
+- `Series` - Current series
+- `SeriesIndex` - Index of the series
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnDataEditHandler(DataEditingEventArgs args)
+ {
+ Console.WriteLine($"Editing: {args.OldValue} -> {args.NewValue}");
+ // Validate changes during drag
+ }
+}
+```
+
+**Use Cases**:
+- Real-time validation during editing
+- Display preview of changes
+- Constrain edit values
+
+### OnDataEditCompleted
+
+Triggers when data point dragging is completed.
+
+**EventArgs**: `DataEditingEventArgs` (same as OnDataEdit)
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnDataEditCompletedHandler(DataEditingEventArgs args)
+ {
+ // Update data source with new value
+ SalesData[args.PointIndex].Sales = args.NewValue;
+ }
+}
+```
+
+**Use Cases**:
+- Save edited values to database
+- Recalculate dependent values
+- Log data changes
+
+---
+
+## Zoom and Scroll Events
+
+### OnZoomStart
+
+Triggers when zoom selection starts.
+
+**EventArgs**: `ZoomingEventArgs`
+- `AxisCollection` - Collection of axes being zoomed
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnZoomStartHandler(ZoomingEventArgs args)
+ {
+ Console.WriteLine("Zoom started");
+ // Show zoom indicator
+ }
+}
+```
+
+**Use Cases**:
+- Display zoom indicators
+- Disable other interactions during zoom
+- Log zoom operations
+
+### OnZoomEnd
+
+Triggers when zoom selection is completed.
+
+**EventArgs**: `ZoomingEventArgs`
+- `AxisCollection` - Collection of axes that were zoomed
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnZoomEndHandler(ZoomingEventArgs args)
+ {
+ // Load detailed data for zoomed range
+ // Update related charts
+ }
+}
+```
+
+**Use Cases**:
+- Load detailed data for zoomed range
+- Synchronize zoom with other charts
+- Save zoom state
+
+### OnScrollChanged
+
+Triggers while scrolling the chart.
+
+**EventArgs**: `ScrollEventArgs`
+- `Axis` - Current axis being scrolled
+- `CurrentRange` - Current range
+- `PreviousAxisRange` - Previous axis range
+- `PreviousRange` - Previous range
+- `PreviousZoomFactor` - Previous zoom factor
+- `PreviousZoomPosition` - Previous zoom position
+- `Range` - Current range
+- `ZoomFactor` - Current zoom factor
+- `ZoomPosition` - Current zoom position
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnScrollChangedHandler(ScrollEventArgs args)
+ {
+ // Lazy load data as user scrolls
+ Console.WriteLine($"Scrolled to position: {args.ZoomPosition}");
+ }
+}
+```
+
+**Use Cases**:
+- Lazy load data during scroll
+- Synchronize scroll with other charts
+- Update range indicators
+
+---
+
+## Export and Print Events
+
+### OnExportComplete
+
+Triggers after chart export is completed.
+
+**EventArgs**: `ExportEventArgs`
+- `DataUrl` - Data URL of the exported file
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+@code {
+ SfChart chartRef;
+
+ public async Task ExportChart()
+ {
+ await chartRef.ExportAsync(ExportType.PNG, "SalesChart");
+ }
+
+ public void OnExportCompleteHandler(ExportEventArgs args)
+ {
+ Console.WriteLine("Export completed");
+ // Show success message
+ }
+}
+```
+
+**Use Cases**:
+- Show export success notification
+- Log export operations
+- Process exported file data
+
+### OnPrintComplete
+
+Triggers after chart print is completed. This event has no specific arguments.
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+@code {
+ SfChart chartRef;
+
+ public async Task PrintChart()
+ {
+ await chartRef.PrintAsync();
+ }
+
+ public void OnPrintCompleteHandler()
+ {
+ Console.WriteLine("Print completed");
+ // Log print operation
+ }
+}
+```
+
+**Use Cases**:
+- Show print confirmation
+- Log print operations
+- Track usage metrics
+
+---
+
+## Axis Events
+
+### OnAxisActualRangeCalculated
+
+Triggers before each axis range is calculated.
+
+**EventArgs**: `AxisRangeCalculatedEventArgs`
+- `Interval` - Current axis interval
+- `Maximum` - Current maximum value
+- `Minimum` - Current minimum value
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnAxisRangeHandler(AxisRangeCalculatedEventArgs args)
+ {
+ // Adjust axis range dynamically
+ args.Maximum = args.Maximum * 1.1; // Add 10% padding
+ }
+}
+```
+
+**Use Cases**:
+- Adjust axis ranges dynamically
+- Add padding to axis limits
+- Synchronize axis ranges across multiple charts
+
+### OnAxisMultiLevelLabelRender
+
+Triggers while rendering multi-level axis labels.
+
+**EventArgs**: `AxisMultiLabelRenderEventArgs`
+- `Alignment` - Label alignment
+- `Text` - Label text
+- `TextStyle` - Text style settings
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnMultiLevelLabelRenderHandler(AxisMultiLabelRenderEventArgs args)
+ {
+ // Customize multi-level label appearance
+ args.Text = args.Text.ToUpper();
+ }
+}
+```
+
+**Use Cases**:
+- Customize multi-level label text
+- Apply conditional styling
+- Format hierarchical labels
+
+### OnMultiLevelLabelClick
+
+Triggers when a multi-level axis label is clicked.
+
+**EventArgs**: `MultiLevelLabelClickEventArgs`
+- `Axis` - Axis of the clicked label
+- `CustomAttributes` - Custom attributes for the label
+- `End` - End value of the label range
+- `Level` - Current level of the label
+- `Start` - Start value of the label range
+- `Text` - Label text
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnMultiLevelLabelClickHandler(MultiLevelLabelClickEventArgs args)
+ {
+ Console.WriteLine($"Clicked: {args.Text} (Level {args.Level})");
+ // Filter data by quarter or drill down
+ }
+}
+```
+
+**Use Cases**:
+- Drill down by time periods
+- Filter data by hierarchical categories
+- Navigate to period-specific views
+
+---
+
+## Additional Events
+
+### TooltipRender
+
+Triggers before a tooltip is rendered for a single series.
+
+**EventArgs**: `TooltipRenderEventArgs`
+- `HeaderText` - Tooltip header text
+- `Text` - Tooltip content text
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnTooltipRenderHandler(TooltipRenderEventArgs args)
+ {
+ args.Text = $"Sales: ${args.Text}K";
+ }
+}
+```
+
+**Use Cases**:
+- Format tooltip content
+- Add custom metrics to tooltips
+- Conditional tooltip styling
+
+### SharedTooltipRender
+
+Triggers before a shared tooltip (multiple series) is rendered.
+
+**EventArgs**: `SharedTooltipRenderEventArgs`
+- `HeaderText` - Shared tooltip header
+- `Text` - Shared tooltip content
+
+**Example**:
+
+```razor
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public void OnSharedTooltipRenderHandler(SharedTooltipRenderEventArgs args)
+ {
+ args.HeaderText = $"Period: {args.HeaderText}";
+ }
+}
+```
+
+**Use Cases**:
+- Format shared tooltip headers
+- Customize multi-series tooltip layout
+- Add comparison data to tooltips
diff --git a/skills/syncfusion-blazor-toolkit-charts/references/getting-started.md b/skills/syncfusion-blazor-toolkit-charts/references/getting-started.md
new file mode 100644
index 0000000..f1d19a0
--- /dev/null
+++ b/skills/syncfusion-blazor-toolkit-charts/references/getting-started.md
@@ -0,0 +1,469 @@
+## Table of Contents
+
+- [Overview](#overview)
+- [Prerequisites](#prerequisites)
+- [Installation Steps](#installation-steps)
+ - [Option 1: Visual Studio](#option-1-visual-studio)
+ - [Option 2: Visual Studio Code](#option-2-visual-studio-code)
+ - [Option 3: .NET CLI](#option-3-net-cli)
+- [Configuration](#configuration)
+ - [Step 1: Add Namespaces](#step-1-add-namespaces)
+ - [Step 2: Register Syncfusion Services](#step-2-register-syncfusion-services)
+ - [Step 3: Add Script Reference](#step-3-add-script-reference)
+- [Creating Your First Chart](#creating-your-first-chart)
+ - [Basic Empty Chart](#basic-empty-chart)
+ - [Chart with Data](#chart-with-data)
+ - [Adding Titles](#adding-titles)
+ - [Adding Data Labels](#adding-data-labels)
+ - [Enabling Tooltips](#enabling-tooltips)
+ - [Adding Legend](#adding-legend)
+- [Complete Example](#complete-example)
+- [Running the Application](#running-the-application)
+ - [Visual Studio](#visual-studio)
+ - [Visual Studio Code / .NET CLI](#visual-studio-code-net-cli)
+- [Multiple Series Example](#multiple-series-example)
+- [Common Setup Issues](#common-setup-issues)
+ - [Issue: Chart Not Rendering](#issue-chart-not-rendering)
+ - [Issue: No Data Displayed](#issue-no-data-displayed)
+ - [Issue: Interactive Mode Error](#issue-interactive-mode-error)
+- [Next Steps](#next-steps)
+- [Additional Resources](#additional-resources)
+
+# Getting Started with Blazor Chart Component
+
+This guide covers everything you need to set up and create your first Blazor Chart component, including installation, configuration, and basic chart implementation.
+
+## Overview
+
+The Syncfusion Blazor Chart component can be integrated into Blazor Server or WebAssembly applications. This guide walks through the setup process using Visual Studio, Visual Studio Code, or .NET CLI.
+
+## Prerequisites
+
+- **.NET SDK:** Version 6.0 or later
+- **Development Environment:** Visual Studio 2022, Visual Studio Code, or .NET CLI
+- **Blazor App:** Server, WebAssembly, or Hybrid app template
+- **System Requirements:** Check [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Installation Steps
+
+### Option 1: Visual Studio
+
+#### Step 1: Create Blazor App
+1. Open Visual Studio 2022
+2. Create new project → **Blazor Web App** template
+3. Configure project name and location
+4. Select **Interactive render mode** (Server, WebAssembly, or Auto)
+5. Choose **Interactivity location** (Global or Per page/component)
+
+#### Step 2: Install NuGet Package
+1. Right-click project → **Manage NuGet Packages**
+2. Search for `Syncfusion.Blazor.Charts`
+3. Install the package
+
+**Or use Package Manager Console:**
+```powershell
+Install-Package Syncfusion.Blazor.Toolkit.Charts
+```
+
+### Option 2: Visual Studio Code
+
+#### Step 1: Create Blazor App
+```bash
+dotnet new blazor -o BlazorChartApp -int Server
+cd BlazorChartApp
+```
+
+#### Step 2: Install NuGet Package
+```bash
+dotnet add package Syncfusion.Blazor.Toolkit.Charts
+dotnet restore
+```
+
+### Option 3: .NET CLI
+
+#### Step 1: Verify .NET SDK
+```bash
+dotnet --version
+```
+
+#### Step 2: Create Blazor App
+```bash
+dotnet new blazor -o BlazorChartApp -int Server
+cd BlazorChartApp
+```
+
+#### Step 3: Install Package
+```bash
+dotnet add package Syncfusion.Blazor.Toolkit.Charts
+dotnet restore
+```
+
+## Configuration
+
+### Step 1: Add Namespaces
+
+Open `_Imports.razor` and add:
+
+```razor
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Toolkit.Charts
+```
+
+### Step 2: Register Syncfusion Services
+
+In `Program.cs`, add the Syncfusion Blazor service:
+
+```csharp
+using Syncfusion.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container
+builder.Services.AddRazorComponents()
+ .AddInteractiveServerComponents();
+
+// Register Syncfusion Blazor Service
+builder.Services.AddSyncfusionBlazor();
+
+var app = builder.Build();
+```
+
+### Step 3: Add Script Reference
+
+In `App.razor` (or `_Layout.cshtml` for older templates), add the script reference before the closing `