From 6b0d52f2883eb1b19f0e5a9c2b472f1d87c20744 Mon Sep 17 00:00:00 2001 From: YokeshSF4393 Date: Fri, 12 Jun 2026 17:24:55 +0530 Subject: [PATCH] 1027279: Added skill files for the blazor toolkit charts. --- .../syncfusion-blazor-toolkit-charts/SKILL.md | 660 ++++++++++ .../accessibility-internationalization.md | 1096 +++++++++++++++ .../references/advanced-features.md | 907 +++++++++++++ .../references/api-reference.md | 1002 ++++++++++++++ .../references/appearance-styling.md | 1170 +++++++++++++++++ .../references/axes-and-scales.md | 926 +++++++++++++ .../references/chart-types-common.md | 724 ++++++++++ .../references/chart-types-specialized.md | 282 ++++ .../references/data-handling.md | 883 +++++++++++++ .../references/events.md | 1126 ++++++++++++++++ .../references/getting-started.md | 469 +++++++ .../references/interactive-features.md | 699 ++++++++++ .../references/legend.md | 585 +++++++++ .../references/practical-examples.md | 718 ++++++++++ .../references/visual-elements.md | 565 ++++++++ 15 files changed, 11812 insertions(+) create mode 100644 skills/syncfusion-blazor-toolkit-charts/SKILL.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/accessibility-internationalization.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/advanced-features.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/api-reference.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/appearance-styling.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/axes-and-scales.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/chart-types-common.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/chart-types-specialized.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/data-handling.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/events.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/getting-started.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/interactive-features.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/legend.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/practical-examples.md create mode 100644 skills/syncfusion-blazor-toolkit-charts/references/visual-elements.md diff --git a/skills/syncfusion-blazor-toolkit-charts/SKILL.md b/skills/syncfusion-blazor-toolkit-charts/SKILL.md new file mode 100644 index 0000000..6313350 --- /dev/null +++ b/skills/syncfusion-blazor-toolkit-charts/SKILL.md @@ -0,0 +1,660 @@ +--- +name: syncfusion-blazor-toolkit-charts +description: Implement Syncfusion Blazor Chart (SfChart) component for core data visualizations. Use this when creating line, area, column/bar, scatter, bubble, spline and stacking chart variants in Blazor applications. +metadata: + author: "Syncfusion Inc" + version: "1.0.0" + category: "Data Visualization" +--- + +# Implementing Syncfusion Blazor Charts + +**NuGet:** `Syncfusion.Blazor.Toolkit` + `Syncfusion.Blazor.Themes` +**Namespace:** `Syncfusion.Blazor.Toolkit` + +A comprehensive guide for implementing the Syncfusion Blazor Chart component to create interactive, feature-rich data visualizations in Blazor applications. The Chart component supports core series types (line, area, column/bar, scatter, bubble, spline) and stacking/step/spline variants, multiple axes, interactivity, and customization. + +## When to Use This Skill + +Use this skill when you need to: +- **Create data visualizations** in Blazor applications (line, column, bar, area, etc.) +- **Display comparative data** with stacked or grouped charts +- **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, 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.Toolkit.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.Toolkit.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: +- Stacked charts (Stack Area/Bar/Column/Line, 100% variants) +- Scatter and Bubble charts +- Multicolored Line / Multicolored Area +- 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 customization +- Theme configuration +- Chart dimensions and sizing +- Responsive design patterns +- Adaptive layout for mobile +- Print support +- Background and border styling +- Gradient customization + +📄 **Read:** [references/advanced-features.md](references/advanced-features.md) + +Use this when: +- Adding technical indicators (EMA, SMA, RSI, etc.) +- Implementing trend lines (linear, exponential, polynomial) +- Creating strip lines (horizontal/vertical bands) +- Using multiple panes (sub-charts) +- Handling empty points + +Topics covered: +- Technical indicators for financial charts +- Trend line types and configuration +- Strip line patterns +- Multiple pane layouts +- Empty point handling strategies +- Row and column definitions + +--- + +### Accessibility and Internationalization + +📄 **Read:** [references/accessibility-internationalization.md](references/accessibility-internationalization.md) + +Use this when: +- Implementing accessible charts (ARIA, keyboard nav) +- Configuring advanced accessibility features +- Enabling internationalization (i18n) +- Setting up localization (l10n) +- Supporting RTL layouts + +Topics covered: +- Accessibility features and ARIA support +- Keyboard navigation patterns +- Advanced accessibility configuration +- Internationalization setup +- Localization resources +- RTL support +- Screen reader compatibility + +--- + +### Events + +📄 **Read:** [references/events.md](references/events.md) + +Use this when: +- Handling chart lifecycle events +- Responding to user interactions (clicks, mouse events) +- Listening to axis, series, or point events +- Implementing custom event handlers +- Triggering actions on zoom, pan, or selection + +Topics covered: +- Chart load and render events +- Point and series events +- Mouse events (click, move, leave) +- Axis label render events +- Legend events +- Zoom and pan events +- Selection events +- Event handler patterns + +--- + +### Practical Examples and How-To Guides + +📄 **Read:** [references/practical-examples.md](references/practical-examples.md) + +Use this for common implementation scenarios: +- Adding/removing series dynamically +- Hiding axes programmatically +- Converting milliseconds to datetime +- Updating points dynamically +- Implementing lazy loading +- Creating live/real-time charts +- Getting selected data +- Synchronizing multiple charts +- Adding threshold lines +- Custom tooltip tables + +Topics covered: +- Dynamic series management +- Axis visibility control +- Date conversion techniques +- Dynamic point updates +- Lazy loading patterns +- Live chart implementation +- Selection data retrieval +- Chart synchronization +- Threshold line implementation +- Custom tooltip tables + +--- + +## Public Methods Reference + +The `SfChart` component provides several public methods for programmatic control. Always use `@ref` to access these methods: + +### Essential Methods + +```razor + + + + +@code { + SfChart ChartRef; + + // Refresh the chart + async Task RefreshChart() => await ChartRef.RefreshAsync(); + + // Export the chart + async Task ExportChart() => await ChartRef.ExportAsync(ExportType.PNG, "chart.png"); + + // Print the chart + async Task PrintChart() => await ChartRef.PrintAsync(); + + // Show/Hide tooltip + void ShowChartTooltip() => ChartRef.ShowTooltip("January", 35); + void HideChartTooltip() => ChartRef.HideTooltip(); + + // Show/Hide crosshair + void ShowChartCrosshair() => ChartRef.ShowCrosshair(100, 50); + void HideChartCrosshair() => ChartRef.HideCrosshair(); + + // Selection control + void ClearSelections() => ChartRef.ClearSelection(); + + // Sorting + void SortData() => ChartRef.Sort("YValue", ListSortDirection.Descending); + void ClearChartSort() => ChartRef.ClearSort(); +} +``` + +**See [references/api-reference.md](references/api-reference.md) for complete method documentation.** + +--- + +## ⚠️ CRITICAL: API Usage Guidelines + +### 1. Enum Names - MUST Use Full Namespace + +**Syncfusion Blazor Toolkit Charts requires FULLY QUALIFIED enum names:** + +```razor + + + + + + + +``` + +**Always use `Syncfusion.Blazor.Toolkit.` prefix for:** +- `ValueType` (Category, Double, DateTime, etc.) +- `ChartSeriesType` (Column, Line, Area, etc.) +- `LegendPosition`, `SelectionMode`, `ZoomMode`, `ChartShape`, etc. + +### 2. Component Property Restrictions + +**⚠️ Common Property Errors to Avoid:** + +#### ChartCrosshairLine - Limited Properties +```razor + + + + + + + +``` + +**Supported ChartCrosshairLine Properties:** +- `Width` - Line width (number) +- `Color` - Line color (string) + +**NOT Supported:** +- ❌ `DashArray` - Will cause runtime error +- ❌ `Opacity` - Not available on this component + +#### Striplines - Use Plural Form +```razor + + + + + + + + + + + +``` + +### 3. Validation Checklist + +Before deploying, verify: +-- ✅ All enums use `Syncfusion.Blazor.Toolkit.` prefix +- ✅ ChartCrosshairLine uses ONLY Width and Color +- ✅ Striplines use `` and `` +- ✅ Component references use `@ref` for method access +- ✅ Property names match official API exactly (case-sensitive) + +--- + +## Quick Start Example + +Here's a minimal example to create a column chart with data: + +```razor +@page "/chart-demo" +@using Syncfusion.Blazor.Toolkit.Charts + + + + + + + + + + + + + + + + + + + +@code { + public class SalesInfo + { + public string Month { get; set; } + public double SalesValue { get; set; } + } + + public List SalesData = new List + { + new SalesInfo { Month = "Jan", SalesValue = 35 }, + new SalesInfo { Month = "Feb", SalesValue = 28 }, + new SalesInfo { Month = "Mar", SalesValue = 34 }, + new SalesInfo { Month = "Apr", SalesValue = 32 }, + new SalesInfo { Month = "May", SalesValue = 40 }, + new SalesInfo { Month = "Jun", SalesValue = 32 } + }; +} +``` + +**Prerequisites:** +1. Install `Syncfusion.Blazor.Toolkit.Charts` NuGet package +2. Add `@using Syncfusion.Blazor.Toolkit.Charts` to `_Imports.razor` +3. Register service: `builder.Services.AddSyncfusionBlazor();` in `Program.cs` +4. Add script reference in `App.razor` + +--- + +## Common Patterns + +### Multi-Series Comparison Chart + +```razor + + + + + + + + + + + + +``` + +### Time-Series Line Chart with Zooming + +```razor + + + + + + + + + + + + +``` + +### Stacked Area Chart with Legend + +```razor + + + + + + + + + + + + + + + +``` + +--- + +## Key Configuration Properties + +### Chart Component (`SfChart`) +- `Title` - Chart title text +- `Width` / `Height` - Chart dimensions (accepts px or %, default: "100%") +- `Theme` - Visual theme (see Theme enum in API reference) +- `Background` - Chart background color +- `EnableAnimation` - Enable/disable animation (default: true) +- `SelectionMode` - Selection mode (None, Series, Point, Cluster, DragXY, DragX, DragY, Lasso) +- `HighlightMode` - Highlight mode (None, Series, Point, Cluster) + +### Primary Axes (`ChartPrimaryXAxis`, `ChartPrimaryYAxis`) +- `ValueType` - Axis type: `Syncfusion.Blazor.Charts.ValueType.Category`, `ValueType.Double`, `ValueType.DateTime`, `ValueType.Logarithmic`, `ValueType.DateTimeCategory` +- `Title` - Axis title +- `Minimum` / `Maximum` - Axis range +- `Interval` - Spacing between labels +- `LabelFormat` - Format string for labels (e.g., "C0", "N2", "dd MMM") +- `EdgeLabelPlacement` - Edge label handling (None, Hide, Shift) +- `LabelIntersectAction` - Label intersection handling (None, Hide, Trim, Wrap, MultipleRows, Rotate45, Rotate90) +- **Striplines** - Use `` (plural) for horizontal/vertical bands + +### Series (`ChartSeries`) +- `DataSource` - Data collection (IEnumerable) +- `XName` / `YName` - Property names for X and Y values (case-sensitive) +- `Type` - Chart type: `Syncfusion.Blazor.Charts.ChartSeriesType.Column`, `ChartSeriesType.Line`, etc. (see API reference) +- `Name` - Series name for legend +- `Fill` - Series color (CSS color string) +- `Width` - Line/border width (pixels) +- `DashArray` - Dash pattern (e.g., "5,5") +- `Opacity` - Transparency (0 to 1) + +### Interactivity +- `ChartTooltipSettings` - Tooltip configuration + - `Enable` - Show/hide tooltip + - `Shared` - Enable shared tooltip for multiple series + - `Format` - Custom tooltip format + - `Template` - Custom tooltip template (RenderFragment) +- `ChartZoomSettings` - Zoom and pan options + - `EnableSelectionZooming` - Enable selection-based zoom + - `EnableMouseWheelZooming` - Enable mouse wheel zoom + - `EnablePinchZooming` - Enable pinch zoom (touch devices) + - `EnablePan` - Enable panning + - `Mode` - Zoom mode (X, Y, XY) +- `SelectionMode` - Selection behavior (see SelectionMode enum) +- `ChartCrosshairSettings` - Crosshair configuration + - `Enable` - Show/hide crosshair + - `LineType` - Crosshair line type (Vertical, Horizontal, Both) + - `ChartCrosshairLine` - Line style (Width, Color ONLY - NO DashArray) + +### Visual Elements +- `ChartMarker` - Data point markers + - `Visible` - Show/hide markers + - `Shape` - Marker shape (see ChartShape enum) + - `Width` / `Height` - Marker dimensions +- `ChartDataLabel` - Data labels on points + - `Visible` - Show/hide labels + - `Position` - Label position + - `Template` - Custom label template +- `ChartLegendSettings` - Legend configuration + - `Visible` - Show/hide legend + - `Position` - Legend position (see LegendPosition enum) +- `ChartAnnotations` - Custom annotations + - Support for text, images, and shapes + +--- + +## Additional Resources + +- **Official Documentation:** [Syncfusion Blazor Chart Documentation](https://blazor.syncfusion.com/documentation/chart/getting-started) +- **API Reference:** [Chart API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.html) +- **Live Demos:** [Blazor Chart Demos](https://blazor.syncfusion.com/demos/chart/line) diff --git a/skills/syncfusion-blazor-toolkit-charts/references/accessibility-internationalization.md b/skills/syncfusion-blazor-toolkit-charts/references/accessibility-internationalization.md new file mode 100644 index 0000000..3fcd541 --- /dev/null +++ b/skills/syncfusion-blazor-toolkit-charts/references/accessibility-internationalization.md @@ -0,0 +1,1096 @@ +# Accessibility and Internationalization Reference + +## Table of Contents + +- [Accessibility Features](#accessibility-features) + - [ARIA Labels and Roles](#aria-labels-and-roles) + - [Keyboard Navigation](#keyboard-navigation) + - [Screen Reader Support](#screen-reader-support) + - [High Contrast Modes](#high-contrast-modes) + - [Focus Management](#focus-management) +- [Internationalization (i18n)](#internationalization-i18n) + - [Locale Configuration](#locale-configuration) + - [Number Formatting](#number-formatting) + - [Date Formatting](#date-formatting) + - [Currency Symbols](#currency-symbols) +- [Localization (l10n)](#localization-l10n) + - [Text Translation](#text-translation) + - [RTL Support](#rtl-support) + - [Custom Locales](#custom-locales) + - [Loading Locale Data](#loading-locale-data) +- [Color Accessibility](#color-accessibility) + - [WCAG Compliance](#wcag-compliance) + - [Color-Blind Friendly Palettes](#color-blind-friendly-palettes) + - [Contrast Ratios](#contrast-ratios) + - [Pattern Alternatives](#pattern-alternatives) +- [Responsive Accessibility](#responsive-accessibility) + - [Touch Target Sizing](#touch-target-sizing) + - [Mobile Accessibility](#mobile-accessibility) + - [Adaptive Features](#adaptive-features) +- [Testing and Validation](#testing-and-validation) + - [Accessibility Testing Tools](#accessibility-testing-tools) + - [Compliance Checklists](#compliance-checklists) + - [Common Issues and Fixes](#common-issues-and-fixes) + + +## Accessibility Features + +### ARIA Labels and Roles + +Syncfusion Blazor Charts follow WAI-ARIA standards to provide semantic information for assistive technologies. + +**Default ARIA Attributes** + +```razor +@using Syncfusion.Blazor.Toolkit + + + + + + + + + + + + + + +@code { + public List ChartData = new List + { + new SalesData { Month = "Jan", Sales = 35 }, + new SalesData { Month = "Feb", Sales = 28 }, + new SalesData { Month = "Mar", Sales = 42 } + }; + + public class SalesData + { + public string Month { get; set; } + public double Sales { get; set; } + } +} +``` + +**ARIA Role Mappings** + +| Element | ARIA Role | Description | +|---------|-----------|-------------| +| Chart Container | `region` | Main chart area | +| Legend | `button` | Toggleable series visibility | +| Data Point | `img` | Individual data representations | +| Tooltip | `tooltip` | Contextual information | +| Axis Labels | `text` | Axis value descriptions | + +### Keyboard Navigation + +Complete keyboard support following WCAG 2.2 guidelines. + +**Basic Navigation** + +```razor +@using Syncfusion.Blazor.Toolkit + + + + + + + + + + Zoom + ZoomIn + ZoomOut + Pan + Reset + + + + + + + + +@code { + public List GrowthData = new List + { + new GrowthInfo { Year = 2020, Rate = 5.2 }, + new GrowthInfo { Year = 2021, Rate = 6.8 }, + new GrowthInfo { Year = 2022, Rate = 7.5 } + }; + + public class GrowthInfo + { + public int Year { get; set; } + public double Rate { get; set; } + } +} +``` + +**Keyboard Shortcuts Reference** + +| Key Combination | Action | +|----------------|--------| +| `Alt + J` | Focus chart element | +| `Tab` / `Shift + Tab` | Navigate elements | +| `Arrow Keys` | Navigate data points/series | +| `Enter` / `Space` | Select/toggle element | +| `Ctrl + +` / `Ctrl + -` | Zoom in/out | +| `Arrow Keys` (during pan) | Pan chart | +| `R` | Reset zoom | +| `Ctrl + P` | Print chart | + +### Screen Reader Support + +Optimize chart content for screen readers with descriptive labels. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + + + +@code { + public List RevenueData = new List + { + new QuarterData { Quarter = "Q1", Amount = 25.5 }, + new QuarterData { Quarter = "Q2", Amount = 32.8 }, + new QuarterData { Quarter = "Q3", Amount = 28.3 }, + new QuarterData { Quarter = "Q4", Amount = 41.2 } + }; + + public class QuarterData + { + public string Quarter { get; set; } + public double Amount { get; set; } + } +} +``` + +### High Contrast Modes + +Support system high contrast themes for improved visibility. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + +@code { + public List ContrastData = new List + { + new CategoryData { Category = "A", Value = 45 }, + new CategoryData { Category = "B", Value = 62 }, + new CategoryData { Category = "C", Value = 38 } + }; + + public class CategoryData + { + public string Category { get; set; } + public double Value { get; set; } + } +} +``` + +### Focus Management + +Implement proper focus indicators and management. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + + + + +@code { + public List ProductData = new List + { + new ProductInfo { Product = "Laptop", Units = 120 }, + new ProductInfo { Product = "Phone", Units = 250 }, + new ProductInfo { Product = "Tablet", Units = 95 } + }; + + public class ProductInfo + { + public string Product { get; set; } + public double Units { get; set; } + } +} +``` + +--- + +## Internationalization (i18n) + +### Locale Configuration + +Configure chart to use specific locales for formatting. + +```razor +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Charts +@using System.Globalization + + + + + + + + + + + + +@code { + protected override void OnInitialized() + { + CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("de-DE"); + CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("de-DE"); + } + + public List SalesData = new List + { + new MonthlySales { Month = "Januar", Sales = 12500.50 }, + new MonthlySales { Month = "Februar", Sales = 15300.75 }, + new MonthlySales { Month = "März", Sales = 18200.25 } + }; + + public class MonthlySales + { + public string Month { get; set; } + public double Sales { get; set; } + } +} +``` + +### Number Formatting + +Apply culture-specific number formatting. + +```razor +@using Syncfusion.Blazor.Charts +@using System.Globalization + + + + + + + + + + + + + + + + +@code { + public List PopulationData = new List + { + new RegionData { Region = "Asia", Population = 4641054775 }, + new RegionData { Region = "Africa", Population = 1340598147 }, + new RegionData { Region = "Europe", Population = 747636026 } + }; + + public class RegionData + { + public string Region { get; set; } + public double Population { get; set; } + } +} +``` + +### Date Formatting + +Format dates according to locale conventions. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + +@code { + public List TemperatureData = new List + { + new TempData { Date = new DateTime(2024, 1, 1), Temp = 15.5 }, + new TempData { Date = new DateTime(2024, 2, 1), Temp = 18.2 }, + new TempData { Date = new DateTime(2024, 3, 1), Temp = 22.8 }, + new TempData { Date = new DateTime(2024, 4, 1), Temp = 25.3 } + }; + + public class TempData + { + public DateTime Date { get; set; } + public double Temp { get; set; } + } +} +``` + +### Currency Symbols + +Display currency using locale-specific symbols. + +```razor +@using Syncfusion.Blazor.Charts +@using System.Globalization + + + + + + + + + + + + + +@code { + public List UsdRevenue = new List + { + new CurrencyData { Quarter = "Q1", Amount = 125000 }, + new CurrencyData { Quarter = "Q2", Amount = 138000 } + }; + + public List EurRevenue = new List + { + new CurrencyData { Quarter = "Q1", Amount = 110000 }, + new CurrencyData { Quarter = "Q2", Amount = 125000 } + }; + + public class CurrencyData + { + public string Quarter { get; set; } + public double Amount { get; set; } + } +} +``` + +--- + +## Localization (l10n) + +### Text Translation + +Translate chart text elements for different languages. + +```razor +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + +@code { + private string CurrentLocale = "en-US"; + + private Dictionary> Translations = new() + { + ["en-US"] = new Dictionary + { + ["ChartTitle"] = "Sales Overview", + ["XAxisTitle"] = "Products", + ["YAxisTitle"] = "Sales Amount", + ["SeriesName"] = "Current Year" + }, + ["es-ES"] = new Dictionary + { + ["ChartTitle"] = "Resumen de Ventas", + ["XAxisTitle"] = "Productos", + ["YAxisTitle"] = "Monto de Ventas", + ["SeriesName"] = "Año Actual" + }, + ["fr-FR"] = new Dictionary + { + ["ChartTitle"] = "Aperçu des Ventes", + ["XAxisTitle"] = "Produits", + ["YAxisTitle"] = "Montant des Ventes", + ["SeriesName"] = "Année en Cours" + } + }; + + private string GetLocalizedText(string key) + { + return Translations[CurrentLocale].ContainsKey(key) + ? Translations[CurrentLocale][key] + : key; + } + + public List LocalizedData = new List + { + new LocaleData { Category = "A", Value = 120 }, + new LocaleData { Category = "B", Value = 95 }, + new LocaleData { Category = "C", Value = 150 } + }; + + public class LocaleData + { + public string Category { get; set; } + public double Value { get; set; } + } +} +``` + +### RTL Support + +Enable right-to-left layout for RTL languages. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + +@code { + public List RtlData = new List + { + new ProductSales { Product = "محمول", Sales = 85000 }, + new ProductSales { Product = "هاتف", Sales = 125000 }, + new ProductSales { Product = "جهاز لوحي", Sales = 65000 } + }; + + public class ProductSales + { + public string Product { get; set; } + public double Sales { get; set; } + } +} +``` + +### Custom Locales + +Define custom locale settings for specialized requirements. + +```razor +@using Syncfusion.Blazor.Charts +@using System.Globalization + + + + + + + + + + +@code { + protected override void OnInitialized() + { + var customCulture = (CultureInfo)CultureInfo.CurrentCulture.Clone(); + customCulture.NumberFormat.NumberDecimalSeparator = ","; + customCulture.NumberFormat.NumberGroupSeparator = "."; + CultureInfo.DefaultThreadCurrentCulture = customCulture; + } + + public List MetricData = new List + { + new MetricInfo { Period = "Jan", Value = 25.5 }, + new MetricInfo { Period = "Feb", Value = 32.8 }, + new MetricInfo { Period = "Mar", Value = 28.3 } + }; + + public class MetricInfo + { + public string Period { get; set; } + public double Value { get; set; } + } +} +``` + +### Loading Locale Data + +Load and apply locale data dynamically. + +```razor +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Charts + +
+ + +
+ + + + + + + + + + +@code { + private string SelectedLocale = "en-US"; + private string ChartTitle = "Monthly Sales"; + private string XAxisTitle = "Month"; + private string YAxisTitle = "Sales"; + private string SeriesName = "Revenue"; + + private void ChangeLocale(ChangeEventArgs e) + { + SelectedLocale = e.Value.ToString(); + LoadLocaleStrings(SelectedLocale); + } + + private void LoadLocaleStrings(string locale) + { + switch (locale) + { + case "de-DE": + ChartTitle = "Monatliche Verkäufe"; + XAxisTitle = "Monat"; + YAxisTitle = "Verkäufe"; + SeriesName = "Umsatz"; + break; + case "ja-JP": + ChartTitle = "月次売上"; + XAxisTitle = "月"; + YAxisTitle = "売上"; + SeriesName = "収益"; + break; + default: + ChartTitle = "Monthly Sales"; + XAxisTitle = "Month"; + YAxisTitle = "Sales"; + SeriesName = "Revenue"; + break; + } + } + + public List ChartData = new List + { + new SalesInfo { Month = "Jan", Sales = 45000 }, + new SalesInfo { Month = "Feb", Sales = 52000 }, + new SalesInfo { Month = "Mar", Sales = 48000 } + }; + + public class SalesInfo + { + public string Month { get; set; } + public double Sales { get; set; } + } +} +``` + +--- + +## Color Accessibility + +### WCAG Compliance + +Ensure color choices meet WCAG 2.2 Level AA standards. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + #0066CC + #E67300 + #00994D + #CC0000 + + + + + + + + + +@code { + public List ComplianceData = new List + { + new DataPoint { Category = "A", Value = 45 }, + new DataPoint { Category = "B", Value = 62 }, + new DataPoint { Category = "C", Value = 38 }, + new DataPoint { Category = "D", Value = 71 } + }; + + public class DataPoint + { + public string Category { get; set; } + public double Value { get; set; } + } +} +``` + +### Color-Blind Friendly Palettes + +Use palettes designed for various types of color blindness. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + #0173B2 + #DE8F05 + #029E73 + #CC78BC + #CA9161 + + + + + + + + + + + + + + + +@code { + public List SeriesA = new List + { + new RateData { Year = 2021, Rate = 5.2 }, + new RateData { Year = 2022, Rate = 6.5 }, + new RateData { Year = 2023, Rate = 7.8 } + }; + + public List SeriesB = new List + { + new RateData { Year = 2021, Rate = 4.8 }, + new RateData { Year = 2022, Rate = 5.9 }, + new RateData { Year = 2023, Rate = 6.2 } + }; + + public List SeriesC = new List + { + new RateData { Year = 2021, Rate = 6.1 }, + new RateData { Year = 2022, Rate = 7.3 }, + new RateData { Year = 2023, Rate = 8.5 } + }; + + public class RateData + { + public int Year { get; set; } + public double Rate { get; set; } + } +} +``` + +### Contrast Ratios + +Maintain proper contrast ratios between chart elements. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + + + + + + + + +@code { + public List ContrastData = new List + { + new MonthlyRevenue { Month = "Jan", Revenue = 32000 }, + new MonthlyRevenue { Month = "Feb", Revenue = 28000 }, + new MonthlyRevenue { Month = "Mar", Revenue = 35000 } + }; + + public class MonthlyRevenue + { + public string Month { get; set; } + public double Revenue { get; set; } + } +} +``` + +### Pattern Alternatives + +Provide pattern fills as alternatives to color coding. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + + + + + +@code { + public List PatternData = new List + { + new MarketData { Segment = "Segment A", Share = 35.5 }, + new MarketData { Segment = "Segment B", Share = 28.2 }, + new MarketData { Segment = "Segment C", Share = 36.3 } + }; + + public class MarketData + { + public string Segment { get; set; } + public double Share { get; set; } + } +} +``` + +--- + +## Responsive Accessibility + +### Touch Target Sizing + +Ensure touch targets meet minimum size requirements (44x44 pixels). + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + +@code { + public List TouchData = new List + { + new TouchDataPoint { Product = "A", Sales = 120 }, + new TouchDataPoint { Product = "B", Sales = 95 }, + new TouchDataPoint { Product = "C", Sales = 145 } + }; + + public class TouchDataPoint + { + public string Product { get; set; } + public double Sales { get; set; } + } +} +``` + +### Mobile Accessibility + +Optimize charts for mobile devices and touch interactions. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + + +@code { + public List MobileData = new List + { + new MobileDataPoint { Month = "Jan", Revenue = 28 }, + new MobileDataPoint { Month = "Feb", Revenue = 35 }, + new MobileDataPoint { Month = "Mar", Revenue = 42 } + }; + + public class MobileDataPoint + { + public string Month { get; set; } + public double Revenue { get; set; } + } +} +``` + +### Adaptive Features + +Implement features that adapt to different screen sizes and orientations. + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + +@code { + private bool IsSmallScreen = false; + private string ChartHeight = "400px"; + + protected override void OnInitialized() + { + // Simulate responsive behavior + IsSmallScreen = true; // Set based on actual screen detection + ChartHeight = IsSmallScreen ? "300px" : "500px"; + } + + public List AdaptiveData = new List + { + new AdaptiveDataPoint { Category = "A", Value = 65 }, + new AdaptiveDataPoint { Category = "B", Value = 78 }, + new AdaptiveDataPoint { Category = "C", Value = 55 } + }; + + public class AdaptiveDataPoint + { + public string Category { get; set; } + public double Value { get; set; } + } +} +``` + +--- + +## Testing and Validation + +### Accessibility Testing Tools + +Recommended tools for validating chart accessibility: + +- **axe DevTools**: Browser extension for WCAG compliance checking +- **WAVE**: Web accessibility evaluation tool +- **NVDA/JAWS**: Screen reader testing +- **Lighthouse**: Chrome DevTools accessibility audit +- **Pa11y**: Automated accessibility testing + +### Compliance Checklists + +**WCAG 2.2 Level AA Checklist** + +- [ ] All images have alt text +- [ ] Color contrast ratio ≥ 4.5:1 for normal text +- [ ] Color contrast ratio ≥ 3:1 for large text +- [ ] Information not conveyed by color alone +- [ ] Keyboard navigation fully functional +- [ ] Focus indicators visible +- [ ] Touch targets ≥ 44x44 pixels +- [ ] Content readable at 200% zoom +- [ ] Screen reader announces all elements +- [ ] RTL support for applicable languages + +### Common Issues and Fixes + +**Issue 1: Low Contrast Data Labels** + +```razor + + + + + + + +``` + +**Issue 2: Missing ARIA Labels** + +```razor + + + + + +``` + +**Issue 3: Small Touch Targets** + +```razor + + + +``` + +**Issue 4: Poor Keyboard Navigation** + +```razor + + + +``` + +**Best Practices Summary** + +1. Always provide text alternatives for visual information +2. Use sufficient color contrast (minimum 4.5:1) +3. Support keyboard navigation for all interactive elements +4. Test with screen readers regularly +5. Implement RTL support for applicable locales +6. Ensure touch targets meet minimum size requirements +7. Provide pattern alternatives to color coding +8. Use semantic HTML and proper ARIA attributes +9. Test across multiple devices and browsers +10. Validate with automated accessibility tools + +--- + +**Compliance Standards Met:** +- WCAG 2.2 Level AA +- Section 508 +- ADA (Americans with Disabilities Act) +- EN 301 549 (European Standard) +- ARIA 1.2 Specification diff --git a/skills/syncfusion-blazor-toolkit-charts/references/advanced-features.md b/skills/syncfusion-blazor-toolkit-charts/references/advanced-features.md new file mode 100644 index 0000000..989fd47 --- /dev/null +++ b/skills/syncfusion-blazor-toolkit-charts/references/advanced-features.md @@ -0,0 +1,907 @@ +# Advanced Features Reference - Syncfusion Blazor Charts + +This comprehensive reference covers advanced features for implementing sophisticated chart visualizations in Blazor applications using Syncfusion Charts. + +## Table of Contents + +- [Multiple Panes](#multiple-panes) + - [When to Use](#when-to-use) + - [Creating Rows (Horizontal Division)](#creating-rows-horizontal-division) + - [Creating Columns (Vertical Division)](#creating-columns-vertical-division) + - [Configuration Options](#configuration-options) +- [Technical Indicators](#technical-indicators) + - [When to Use](#when-to-use) + - [Moving Average (SMA, EMA, TMA)](#moving-average-sma-ema-tma) + - [RSI (Relative Strength Index)](#rsi-relative-strength-index) + - [Bollinger Bands](#bollinger-bands) + - [MACD (Moving Average Convergence Divergence)](#macd-moving-average-convergence-divergence) + - [Available Indicators](#available-indicators) +- [Trend Lines](#trend-lines) + - [When to Use](#when-to-use) + - [Linear Trend Line](#linear-trend-line) + - [Polynomial Trend Line](#polynomial-trend-line) + - [Exponential Trend Line](#exponential-trend-line) + - [Logarithmic Trend Line](#logarithmic-trend-line) + - [Moving Average Trend Line](#moving-average-trend-line) + - [Forecasting with Trend Lines](#forecasting-with-trend-lines) + - [Configuration Options](#configuration-options) +- [Strip Lines](#strip-lines) + - [When to Use](#when-to-use) + - [Horizontal Strip Lines](#horizontal-strip-lines) + - [Vertical Strip Lines](#vertical-strip-lines) + - [Segmented Strip Lines](#segmented-strip-lines) + - [Strip Line with Custom Text](#strip-line-with-custom-text) + - [Strip Line with Tooltip](#strip-line-with-tooltip) + - [Configuration Options](#configuration-options) +- [Multiple Axes](#multiple-axes) + - [When to Use](#when-to-use) + - [Dual Y-Axes](#dual-y-axes) + - [Multiple X and Y Axes](#multiple-x-and-y-axes) + - [Configuration Options](#configuration-options) +- [Data Editing](#data-editing) + - [When to Use](#when-to-use) + - [Basic Data Editing](#basic-data-editing) + - [Configuration Options](#configuration-options) +- [Empty Points](#empty-points) + - [When to Use](#when-to-use) + - [Empty Point Modes](#empty-point-modes) + - [Empty Point Modes Explained](#empty-point-modes-explained) +- [Chart Export](#chart-export) + - [When to Use](#when-to-use) + - [Export to Image Formats](#export-to-image-formats) + - [Export to PDF](#export-to-pdf) + - [Export to Excel (XLSX/CSV)](#export-to-excel-xlsxcsv) + - [Export as Base64 String](#export-as-base64-string) + - [Customize Export with Events](#customize-export-with-events) + - [Export Multiple Charts](#export-multiple-charts) + - [Supported Export Formats](#supported-export-formats) +- [Print](#print) + - [When to Use](#when-to-use) + - [Basic Printing](#basic-printing) + - [Print Multiple Charts](#print-multiple-charts) + - [Print-Specific Styling](#print-specific-styling) +- [RTL Support](#rtl-support) + - [When to Use](#when-to-use) + - [Enabling RTL Mode](#enabling-rtl-mode) + - [RTL with Localization](#rtl-with-localization) + - [RTL Configuration](#rtl-configuration) +- [Implementation Patterns](#implementation-patterns) + - [Pattern 1: Financial Dashboard](#pattern-1-financial-dashboard) + - [Pattern 2: Performance Monitoring](#pattern-2-performance-monitoring) + - [Pattern 3: Comparative Analysis](#pattern-3-comparative-analysis) +- [Best Practices](#best-practices) +- [Common Use Cases Summary](#common-use-cases-summary) +- [Reference Links](#reference-links) + + +## Multiple Panes + +Multiple panes allow you to divide the chart area into separate plotting regions, ideal for comparing different data series or displaying related metrics with different scales. + +### When to Use +- Comparing series with vastly different value ranges +- Creating dashboard-style layouts with multiple related charts +- Financial charts showing price and volume data +- Weather charts displaying temperature and humidity + +### Creating Rows (Horizontal Division) + +```razor + + + + + + + + + + + + + + + + + + +``` + +### Creating Columns (Vertical Division) + +```razor + + + + + + + + + + + + + + + + + + +``` + +### Configuration Options +- `Height`/`Width`: Set pane dimensions (percentage or pixels) +- `RowIndex`/`ColumnIndex`: Bind axis to specific pane +- `Span`: Span axis across multiple panes +- `Border`: Customize pane boundaries + +--- + +## Technical Indicators + +Technical indicators are mathematical calculations based on historical price, volume, or open interest data, used primarily in financial chart analysis. + +### When to Use +- Stock market analysis and trading platforms +- Financial forecasting applications +- Technical analysis dashboards +- Real-time market monitoring + + + +### Bollinger Bands + +```razor + + + + + + +``` + +### MACD (Moving Average Convergence Divergence) + +```razor + + + + + +``` + +### Available Indicators +- **SMA**: Simple Moving Average +- **EMA**: Exponential Moving Average +- **TMA**: Triangular Moving Average +- **RSI**: Relative Strength Index +- **MACD**: Moving Average Convergence Divergence +- **Bollinger Bands**: Volatility indicator +- **ATR**: Average True Range +- **Stochastic**: Momentum indicator +- **Momentum**: Rate of price change +- **Accumulation Distribution**: Volume flow indicator + +--- + +## Trend Lines + +Trend lines visualize the direction and pace of data trends using mathematical regression models. + +### When to Use +- Forecasting future data points +- Identifying data patterns and correlations +- Scientific data analysis +- Business intelligence dashboards + +### Linear Trend Line + +```razor + + + + + + +``` + +### Polynomial Trend Line + +```razor + + + +``` + +### Exponential Trend Line + +```razor + + + +``` + +### Logarithmic Trend Line + +```razor + + + +``` + +### Moving Average Trend Line + +```razor + + + +``` + +### Forecasting with Trend Lines + +```razor + + + +``` + +### Configuration Options +- `Type`: Linear, Exponential, Logarithmic, Polynomial, Power, MovingAverage +- `Width`: Line thickness +- `Fill`: Trend line color +- `ForwardForecast`: Predict future points +- `BackwardForecast`: Show historical trend +- `Period`: Moving average calculation period +- `PolynomialOrder`: Degree for polynomial trends + +--- + +## Strip Lines + +Strip lines are horizontal or vertical bands that highlight specific ranges or thresholds in the chart. + +### When to Use +- Highlighting target ranges or thresholds +- Marking acceptable/warning/critical zones +- Showing business hours or time periods +- Indicating baseline or benchmark values + +### Horizontal Strip Lines + +```razor + + + + + + + + + + + + +``` + +### Vertical Strip Lines + +```razor + + + + + + +``` + +### Segmented Strip Lines + +```razor + + + + + +``` + +### Strip Line with Custom Text + +```razor + + + + +``` + +### Strip Line with Tooltip + +```razor + + + + + +``` + +### Configuration Options +- `Start`/`End`: Define strip line boundaries +- `Color`: Background color +- `Opacity`: Transparency level +- `ZIndex`: Drawing order (Behind/Over) +- `IsSegmented`: Create partial strip lines +- `Size`: Alternative to End for fixed width +- `StartFromAxis`: Begin from axis origin + +--- + +## Multiple Axes + +Multiple axes enable displaying series with different scales or units on the same chart. + +### When to Use +- Comparing metrics with different units (e.g., temperature and rainfall) +- Financial charts with price and volume +- Dual-scale dashboards +- Correlation analysis + +### Dual Y-Axes + +```razor + + + + + + + + + + + + + + + + + +``` + +### Multiple X and Y Axes + +```razor + + + + + + + + + + + + + + +``` + +### Configuration Options +- `Name`: Unique identifier for axis +- `OpposedPosition`: Place on opposite side +- `RowIndex`/`ColumnIndex`: Position in multi-pane layout +- `Span`: Span across multiple panes +- All standard axis properties (min, max, interval, etc.) + +--- + +## Data Editing + +Data editing allows users to interactively drag and modify data points at runtime. + +### When to Use +- Interactive data entry applications +- Manual data adjustment tools +- What-if analysis scenarios +- Training and simulation applications + +### Basic Data Editing + +```razor + + + + + + + + + + + + + + + + + + +``` + +### Configuration Options +- `Enable`: Enable/disable data editing +- `Fill`: Color for edited points +- `MinY`/`MaxY`: Restrict editing range + +--- + +## Empty Points + +Handle missing or null data points with various rendering modes. + +### When to Use +- Datasets with incomplete information +- Time series with gaps +- Sensor data with occasional failures +- Survey results with non-responses + +### Empty Point Modes + +```razor + + + + + + + + + + + + + + + + + + + + + + + + +``` + +### Empty Point Modes Explained +- **Zero**: Treats null/undefined as zero value +- **Average**: Calculates average of adjacent points +- **Gap**: Shows break in continuity (line/area charts) +- **Drop**: Completely ignores the point + +--- + +## Chart Export + +Export rendered charts to various formats for reporting and sharing. + +### When to Use +- Generating reports and presentations +- Saving charts for offline viewing +- Email attachments and documentation +- Archiving visualizations + +### Export to Image Formats + +```razor +@using Syncfusion.Blazor.Charts +@using Syncfusion.Blazor.Buttons + + + + + + + +
+ + + +
+ +@code { + SfChart ChartRef; + + private async Task ExportPNG() => + await ChartRef.ExportAsync(ExportType.PNG, "chart"); + + private async Task ExportJPEG() => + await ChartRef.ExportAsync(ExportType.JPEG, "chart"); + + private async Task ExportSVG() => + await ChartRef.ExportAsync(ExportType.SVG, "chart"); +} +``` + +### Export to PDF + +```razor + + +@code { + private async Task ExportPDF() + { + await ChartRef.ExportAsync(ExportType.PDF, "report", + PdfPageOrientation.Landscape); + } +} +``` + +### Export to Excel (XLSX/CSV) + +```razor + + + +@code { + private async Task ExportExcel() => + await ChartRef.ExportAsync(ExportType.XLSX, "data"); + + private async Task ExportCSV() => + await ChartRef.ExportAsync(ExportType.CSV, "data"); +} +``` + +### Export as Base64 String + +```razor + + +@code { + private async Task ExportBase64() + { + await ChartRef.ExportAsync(ExportType.PDF, "chart", + PdfPageOrientation.Portrait, allowDownload: false, isBase64: true); + } + + private void ExportComplete(ExportEventArgs args) + { + string base64String = args.Base64; + // Use base64 string for custom operations + } +} +``` + +### Customize Export with Events + +```razor + + +@code { + private void BeforeExport(ChartExportEventArgs args) + { + // Customize dimensions + args.Width = 1200; + args.Height = 800; + + // For Excel exports, customize workbook + if (args.Workbook != null) + { + var sheet = args.Workbook.Worksheets.First(); + sheet.Rows[0].Cells[0].CellStyle.BackColor = "#4472C4"; + sheet.Rows[0].Cells[0].CellStyle.Bold = true; + } + } +} +``` + +### Export Multiple Charts + +```razor +
+ ... + ... +
+ + + +@code { + ElementReference ChartContainer; + SfChart Chart1; + + private async Task ExportAll() => + await Chart1.PrintAsync(ChartContainer); +} +``` + +### Supported Export Formats +- **PNG**: Raster image format +- **JPEG**: Compressed image format +- **SVG**: Vector graphics format +- **PDF**: Portable document format +- **XLSX**: Excel workbook +- **CSV**: Comma-separated values + +--- + +## Print + +Print charts directly from the browser with customization options. + +### When to Use +- Creating hard copies for meetings +- Generating physical reports +- Archiving visualizations +- Presentation materials + +### Basic Printing + +```razor + + + + + + + + +@code { + SfChart ChartRef; + + private async Task PrintChart() => await ChartRef.PrintAsync(); +} +``` + +### Print Multiple Charts + +```razor +
+ ... + ... + ... +
+ + + +@code { + ElementReference PrintContainer; + SfChart Chart1; + + private async Task PrintAll() => + await Chart1.PrintAsync(PrintContainer); +} +``` + +### Print-Specific Styling + +```razor + +``` + +--- + +## RTL Support + +Right-to-left (RTL) rendering for internationalization in languages like Arabic and Hebrew. + +### When to Use +- Applications supporting RTL languages +- Multi-language dashboard applications +- Internationalized reporting tools +- Global market applications + +### Enabling RTL Mode + +```razor + + + + + + + + +``` + +### RTL with Localization + +```razor + + + + + + + + + + + + +``` + +### RTL Configuration +- `EnableRtl`: Enable right-to-left rendering +- `Locale`: Set culture-specific formatting +- Automatically mirrors: legends, tooltips, data labels +- Reverses: axis direction, series rendering order + +--- + +## Implementation Patterns + + + +### Pattern 2: Performance Monitoring + +```razor + + + + + + + + + + + + + + + +``` + +### Pattern 3: Comparative Analysis + +```razor + + + + + + + + + + + + + + + + + + + + + + + + +``` + +--- + +## Best Practices + +1. **Performance Optimization** + - Limit number of technical indicators (use max 3-4) + - Use data editing judiciously for large datasets + - Consider data aggregation for trend lines on large datasets + +2. **User Experience** + - Provide clear labels for multiple axes + - Use contrasting colors for strip lines + - Include legends when using multiple indicators + - Add tooltips for interactive features + +3. **Accessibility** + - Use sufficient color contrast for strip lines + - Provide text alternatives for visual indicators + - Enable keyboard navigation for data editing + - Support screen readers with proper ARIA labels + +4. **Export Optimization** + - Set appropriate dimensions before export + - Use vector formats (SVG, PDF) for scalable output + - Optimize image quality vs. file size for raster formats + - Include chart title and legends in exports + +5. **RTL Considerations** + - Test thoroughly with actual RTL content + - Ensure custom styling respects RTL mode + - Verify numeric formatting in RTL cultures + - Check tooltip and legend positioning + +--- + +## Common Use Cases Summary + +| Feature | Primary Use Case | Best Chart Types | +|---------|-----------------|------------------| +| Multiple Panes | Financial analysis, Multi-metric dashboards | Line, Column | +| Technical Indicators | Stock trading, Market analysis | Line | +| Trend Lines | Forecasting, Pattern recognition | Scatter, Line, Area | +| Strip Lines | Threshold monitoring, Range highlighting | All types | +| Multiple Axes | Dual-scale comparison | Line, Column, Area | +| Data Editing | Interactive forecasting, Manual adjustment | Column, Line, Scatter | +| Empty Points | Incomplete data handling | Line, Area, Spline | +| Export | Reporting, Documentation | All types | +| Print | Hard copy generation | All types | +| RTL | International applications | All types | + +--- + +## Reference Links + +- Syncfusion Blazor Charts Documentation: https://blazor.syncfusion.com/documentation/chart/getting-started +- API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.html +- Live Demos: https://blazor.syncfusion.com/demos/chart/line + +--- + +*This reference is self-contained and requires no external dependencies beyond Syncfusion.Blazor.Charts package.* diff --git a/skills/syncfusion-blazor-toolkit-charts/references/api-reference.md b/skills/syncfusion-blazor-toolkit-charts/references/api-reference.md new file mode 100644 index 0000000..47f3ddd --- /dev/null +++ b/skills/syncfusion-blazor-toolkit-charts/references/api-reference.md @@ -0,0 +1,1002 @@ +# Syncfusion Blazor Charts - Complete API Reference + +## Table of Contents + +- [Overview](#overview) +- [SfChart Component](#sfchart-component) + - [Public Methods](#public-methods) +- [Enumerations](#enumerations) + - [ChartSeriesType](#chartseriestype) + - [ValueType](#valuetype) + - [SelectionMode](#selectionmode) + - [HighlightMode](#highlightmode) + - [SelectionPattern](#selectionpattern) + - [ExportType](#exporttype) + - [LegendPosition](#legendposition) + - [EmptyPointMode](#emptypointmode) + - [LabelPlacement](#labelplacement) + - [EdgeLabelPlacement](#edgelabelplacement) + - [LabelIntersectAction](#labelintersectaction) + - [ChartShape](#chartshape) + - [TrendlineTypes](#trendlinetypes) + - [TechnicalIndicators](#technicalindicators) + - [ZoomMode](#zoommode) + - [ToolbarItems](#toolbaritems) + - [Theme](#theme) +- [Key Classes and Components](#key-classes-and-components) + - [ChartSeries](#chartseries) + - [ChartPrimaryXAxis / ChartPrimaryYAxis](#chartprimaryxaxis-chartprimaryyaxis) + - [ChartTooltipSettings](#charttooltipsettings) + - [ChartLegendSettings](#chartlegendsettings) + - [ChartZoomSettings](#chartzoomsettings) +- [Important Notes](#important-notes) +- [Common Patterns](#common-patterns) + - [Basic Chart with Data](#basic-chart-with-data) + - [Chart with Multiple Series](#chart-with-multiple-series) + - [Chart with Zooming](#chart-with-zooming) + + +## Overview + +This document provides the complete and accurate API reference for Syncfusion Blazor Charts based on the official Syncfusion API documentation. Use this as the authoritative source for all enum values, method signatures, and property names. + +--- + +## SfChart Component + +### Public Methods + +The `SfChart` component provides the following public methods for programmatic control: + +#### RefreshAsync(bool shouldAnimate = true) + +Re-renders the chart with optional animation. + +```csharp +public Task RefreshAsync(bool shouldAnimate = true) +``` + +**Parameters:** +- `shouldAnimate` - Specifies whether the chart should animate during refresh (default: true) + +**Returns:** `Task` + +**Example:** +```razor + + + + +@code { + SfChart ChartRef; + + async Task UpdateChart() + { + await ChartRef.RefreshAsync(true); + } +} +``` + +--- + +#### ExportAsync(ExportType type, string fileName, PdfPageOrientation? orientation = null, bool allowDownload = true, bool isBase64 = false) + +Exports the chart to various formats (PDF, PNG, JPEG, SVG). + +```csharp +public Task ExportAsync(ExportType type, string fileName, PdfPageOrientation? orientation = null, bool allowDownload = true, bool isBase64 = false) +``` + +**Parameters:** +- `type` - The export format (`ExportType` enum) +- `fileName` - The name of the exported file +- `orientation` - PDF page orientation (Portrait/Landscape) +- `allowDownload` - Whether to download the file +- `isBase64` - Whether to return as base64 string + +**Returns:** `Task` + +**Example:** +```razor + + + + +@code { + SfChart ChartRef; + + async Task ExportChart() + { + await ChartRef.ExportAsync(ExportType.PNG, "SalesChart"); + } +} +``` + +--- + +#### PrintAsync(ElementReference elementRef = default) + +Prints the chart. + +```csharp +public Task PrintAsync(ElementReference elementRef = default) +``` + +**Parameters:** +- `elementRef` - Optional reference to the chart element + +**Returns:** `Task` + +**Example:** +```razor + + + + +@code { + SfChart ChartRef; + + async Task PrintChart() + { + await ChartRef.PrintAsync(); + } +} +``` + +--- + +#### ShowTooltip(object x, double y, bool isPoint = true) + +Displays tooltip at specified coordinates or data points. + +```csharp +public void ShowTooltip(object x, double y, bool isPoint = true) +``` + +**Parameters:** +- `x` - X-value of the point or x-coordinate +- `y` - Y-value of the point or y-coordinate +- `isPoint` - Whether x and y are data points (true) or coordinates (false) + +**Example:** +```razor + + + + + +@code { + SfChart ChartRef; + + void DisplayTooltip() + { + ChartRef.ShowTooltip("January", 35); + } +} +``` + +--- + +#### HideTooltip() + +Hides the currently displayed tooltip. + +```csharp +public void HideTooltip() +``` + +**Example:** +```razor +@code { + SfChart ChartRef; + + void HideChartTooltip() + { + ChartRef.HideTooltip(); + } +} +``` + +--- + +#### ShowCrosshair(double x, double y) + +Displays crosshair at specified coordinates. + +```csharp +public void ShowCrosshair(double x, double y) +``` + +**Parameters:** +- `x` - X-coordinate on the chart +- `y` - Y-coordinate on the chart + +**Example:** +```razor + + + + + +@code { + SfChart ChartRef; + + void DisplayCrosshair() + { + ChartRef.ShowCrosshair(100, 50); + } +} +``` + +--- + +#### HideCrosshair() + +Hides the currently displayed crosshair. + +```csharp +public void HideCrosshair() +``` + +**Example:** +```razor +@code { + SfChart ChartRef; + + void HideChartCrosshair() + { + ChartRef.HideCrosshair(); + } +} +``` + +--- + +#### ClearSelection() + +Clears all selections in the chart. + +```csharp +public void ClearSelection() +``` + +**Example:** +```razor + + + + +@code { + SfChart ChartRef; + + void ClearAllSelections() + { + ChartRef.ClearSelection(); + } +} +``` + +--- + +#### Sort(string propertyName, ListSortDirection direction) + +Sorts chart data by property name and direction. + +```csharp +public void Sort(string propertyName, ListSortDirection direction) +``` + +**Parameters:** +- `propertyName` - Property name to sort by +- `direction` - Sort direction (`Ascending` or `Descending`) + +**Example:** +```razor + + + + + +@code { + SfChart ChartRef; + + void SortByValue() + { + ChartRef.Sort("Y", ListSortDirection.Descending); + } +} +``` + +--- + +#### ClearSort() + +Clears the sorting applied to the chart. + +```csharp +public void ClearSort() +``` + +**Example:** +```razor +@code { + SfChart ChartRef; + + void RemoveSorting() + { + ChartRef.ClearSort(); + } +} +``` + +--- + +#### PreventRender(bool preventRender = true) + +Prevents or allows chart rendering. + +```csharp +public void PreventRender(bool preventRender = true) +``` + +**Parameters:** +- `preventRender` - If true, prevents rendering; if false, allows rendering + +**Example:** +```razor +@code { + SfChart ChartRef; + + void StopRendering() + { + ChartRef.PreventRender(true); + // Perform batch updates + ChartRef.PreventRender(false); // Resume rendering + } +} +``` + +--- + +## Enumerations + +### ChartSeriesType + +Specifies the type of chart series. + +```csharp +public enum ChartSeriesType +{ + Line, + Column, + Area, + Bar, + Bubble, + Scatter, + Spline, + SplineArea, + StepLine, + StepArea, + StackingColumn, + StackingColumn100, + StackingBar, + StackingBar100, + StackingArea, + StackingArea100, + StackingLine, + StackingLine100, + MultiColoredLine, + MultiColoredArea +} +``` + +**Common Values:** +- `Line` - Line chart +- `Column` - Vertical column chart +- `Area` - Area chart +- `Bar` - Horizontal bar chart +- `Spline` - Smooth line chart +- `Scatter` - Scatter plot +- `Bubble` - Bubble chart +- `StackingColumn` - Stacked column chart +- `StackingColumn100` - 100% stacked column chart + +--- + +### ValueType + +Specifies the type of axis. + +```csharp +public enum ValueType +{ + Double, + DateTime, + Category, + Logarithmic, + DateTimeCategory +} +``` + +**Values:** +- `Double` - Numeric axis +- `DateTime` - DateTime axis +- `Category` - Category axis +- `Logarithmic` - Logarithmic axis +- `DateTimeCategory` - DateTime category axis + +--- + +### SelectionMode + +Specifies the selection mode. + +```csharp +public enum SelectionMode +{ + None, + Series, + Point, + Cluster, + DragXY, + DragX, + DragY, + Lasso +} +``` + +**Values:** +- `None` - No selection +- `Series` - Select entire series +- `Point` - Select individual point +- `Cluster` - Select cluster of points +- `DragXY` - Drag to select in both directions +- `DragX` - Drag to select horizontally +- `DragY` - Drag to select vertically +- `Lasso` - Lasso selection + +--- + +### HighlightMode + +Specifies the highlight mode. + +```csharp +public enum HighlightMode +{ + None, + Series, + Point, + Cluster +} +``` + +**Values:** +- `None` - No highlighting +- `Series` - Highlight entire series +- `Point` - Highlight individual point +- `Cluster` - Highlight cluster of points + +--- + +### SelectionPattern + +Specifies selection/highlight patterns. + +```csharp +public enum SelectionPattern +{ + None, + DiagonalForward, + DiagonalBackward, + Crosshatch, + Dots, + Chessboard, + Grid, + Turquoise, + Star, + Triangle, + Circle, + Tile, + HorizontalDash, + VerticalDash, + Rectangle, + Box, + VerticalStripe, + HorizontalStripe, + Bubble +} +``` + +--- + +### ExportType + +Specifies export types. + +```csharp +public enum ExportType +{ + PNG, + JPEG, + SVG, + PDF +} +``` + +**Values:** +- `PNG` - Export as PNG image +- `JPEG` - Export as JPEG image +- `SVG` - Export as SVG vector +- `PDF` - Export as PDF document + +--- + +### LegendPosition + +Specifies legend position. + +```csharp +public enum LegendPosition +{ + Auto, + Top, + Left, + Bottom, + Right, + Custom +} +``` + +**Values:** +- `Auto` - Automatically positions legend +- `Top` - Position at top +- `Left` - Position at left +- `Bottom` - Position at bottom +- `Right` - Position at right +- `Custom` - Custom position using X and Y coordinates + +--- + +### EmptyPointMode + +Specifies how to handle empty points. + +```csharp +public enum EmptyPointMode +{ + Gap, + Zero, + Drop, + Average +} +``` + +**Values:** +- `Gap` - Leave gap at empty point +- `Zero` - Treat as zero +- `Drop` - Drop the empty point +- `Average` - Use average of surrounding points + +--- + +### LabelPlacement + +Specifies label placement for category axis. + +```csharp +public enum LabelPlacement +{ + BetweenTicks, + OnTicks +} +``` + +**Values:** +- `BetweenTicks` - Place labels between ticks +- `OnTicks` - Place labels on ticks + +--- + +### EdgeLabelPlacement + +Specifies edge label placement. + +```csharp +public enum EdgeLabelPlacement +{ + None, + Hide, + Shift +} +``` + +**Values:** +- `None` - No special treatment +- `Hide` - Hide edge labels +- `Shift` - Shift edge labels inside + +--- + +### LabelIntersectAction + +Specifies action for intersecting labels. + +```csharp +public enum LabelIntersectAction +{ + None, + Hide, + Trim, + Wrap, + MultipleRows, + Rotate45, + Rotate90 +} +``` + +**Values:** +- `None` - No action +- `Hide` - Hide intersecting labels +- `Trim` - Trim labels with ellipsis +- `Wrap` - Wrap label text +- `MultipleRows` - Display in multiple rows +- `Rotate45` - Rotate labels 45 degrees +- `Rotate90` - Rotate labels 90 degrees + +--- + +### ChartShape + +Specifies marker shapes. + +```csharp +public enum ChartShape +{ + Circle, + Rectangle, + Triangle, + Diamond, + Pentagon, + Cross, + HorizontalLine, + VerticalLine, + InvertedTriangle, + Image +} +``` + +--- + +### TrendlineTypes + +Specifies trendline types. + +```csharp +public enum TrendlineTypes +{ + Linear, + Exponential, + Logarithmic, + Polynomial, + Power, + MovingAverage +} +``` + +**Values:** +- `Linear` - Linear trendline +- `Exponential` - Exponential trendline +- `Logarithmic` - Logarithmic trendline +- `Polynomial` - Polynomial trendline +- `Power` - Power trendline +- `MovingAverage` - Moving average trendline + +--- + +### TechnicalIndicators + +Specifies technical indicator types. + +```csharp +public enum TechnicalIndicators +{ + Sma, + Ema, + Tma, + Momentum, + Atr, + AccumulationDistribution, + Bollinger, + Macd, + Stochastic, + Rsi +} +``` + +**Common Values:** +- `Sma` - Simple Moving Average +- `Ema` - Exponential Moving Average +- `Tma` - Triangular Moving Average +- `Momentum` - Momentum indicator +- `Rsi` - Relative Strength Index +- `Macd` - Moving Average Convergence Divergence +- `Bollinger` - Bollinger Bands +- `Atr` - Average True Range +- `Stochastic` - Stochastic oscillator + +--- + +### ZoomMode + +Specifies zooming mode. + +```csharp +public enum ZoomMode +{ + X, + Y, + XY +} +``` + +**Values:** +- `X` - Zoom horizontally only +- `Y` - Zoom vertically only +- `XY` - Zoom in both directions + +--- + +### ToolbarItems + +Specifies zooming toolbar items. + +```csharp +public enum ToolbarItems +{ + Zoom, + ZoomIn, + ZoomOut, + Pan, + Reset +} +``` + +--- + +### Theme + +Specifies chart themes. Use `Syncfusion.Blazor.Theme` enum for setting the `Theme` property of `SfChart`. + +**IMPORTANT:** The enum name is `Theme`, not `ChartTheme`. Use it as `Theme="Syncfusion.Blazor.Theme.Material"` or `Theme="Theme.Material"` (with proper using directive). + +```csharp +public enum Theme +{ + Material, + Fabric, + Bootstrap, + Bootstrap4, + HighContrastLight, + MaterialDark, + FabricDark, + BootstrapDark, + Bootstrap4Dark, + HighContrast, + Tailwind, + TailwindDark, + Bootstrap5, + Bootstrap5Dark, + Fluent, + FluentDark, + Material3, + Material3Dark +} +``` + +**Usage Example:** +```razor + + + +``` + +--- + +## Key Classes and Components + +### ChartSeries + +Represents a chart series with its data and configuration. + +**Key Properties:** +```csharp +public string DataSource { get; set; } +public string XName { get; set; } +public string YName { get; set; } +public ChartSeriesType Type { get; set; } +public string Name { get; set; } +public string Fill { get; set; } +public double Width { get; set; } +public string DashArray { get; set; } +public double Opacity { get; set; } +``` + +--- + +### ChartPrimaryXAxis / ChartPrimaryYAxis + +Configures the primary axes. + +**Key Properties:** +```csharp +public ValueType ValueType { get; set; } +public string Title { get; set; } +public object Minimum { get; set; } +public object Maximum { get; set; } +public double Interval { get; set; } +public string LabelFormat { get; set; } +public EdgeLabelPlacement EdgeLabelPlacement { get; set; } +public LabelIntersectAction LabelIntersectAction { get; set; } +``` + +--- + +### ChartTooltipSettings + +Configures tooltip behavior. + +**Key Properties:** +```csharp +public bool Enable { get; set; } +public string Format { get; set; } +public bool Shared { get; set; } +public string Fill { get; set; } +public string TextStyle { get; set; } +public RenderFragment Template { get; set; } +``` + +--- + +### ChartLegendSettings + +Configures legend appearance and behavior. + +**Key Properties:** +```csharp +public bool Visible { get; set; } +public LegendPosition Position { get; set; } +public Alignment Alignment { get; set; } +public LegendShape Shape { get; set; } +public RenderFragment Template { get; set; } +``` + +--- + +### ChartZoomSettings + +Configures zooming behavior. + +**Key Properties:** +```csharp +public bool EnableSelectionZooming { get; set; } +public bool EnablePinchZooming { get; set; } +public bool EnableMouseWheelZooming { get; set; } +public bool EnableScrollbar { get; set; } +public bool EnablePan { get; set; } +public ZoomMode Mode { get; set; } +public ToolbarItems[] ToolbarItems { get; set; } +``` + +--- + +## Important Notes + +1. **Correct Enum Usage**: Always use the fully qualified enum name: + ```razor + Type="ChartSeriesType.Column" + Type="Syncfusion.Blazor.Toolkit.ChartSeriesType.Column" + ``` + +2. **Method Naming**: All public methods use proper C# naming conventions: + - `RefreshAsync()` - NOT `Refresh()` + - `ExportAsync()` - NOT `Export()` + - `ShowTooltip()` - NOT `Show_Tooltip()` + +3. **Namespace**: Always include the namespace import: + ```razor + @using Syncfusion.Blazor.Toolkit.Charts + ``` + +4. **Component Reference**: To call methods, use `@ref`: + ```razor + + + + @code { + SfChart ChartRef; + } + ``` + +--- + +## Common Patterns + +### Basic Chart with Data + +```razor +@using Syncfusion.Blazor.Toolkit.Charts + + + + + + + + + + + +@code { + public class SalesInfo + { + public string Month { get; set; } + public double Sales { get; set; } + } + + public List SalesData = new List + { + new SalesInfo { Month = "Jan", Sales = 35 }, + new SalesInfo { Month = "Feb", Sales = 28 }, + new SalesInfo { Month = "Mar", Sales = 34 } + }; +} +``` + +### Chart with Multiple Series + +```razor + + + + + + + + + + + + +``` + +### Chart with Zooming + +```razor + + + + + + + + +``` + +--- + +This API reference document provides accurate information based on the official Syncfusion Blazor Charts API. Always refer to this document when generating code samples or providing API guidance. diff --git a/skills/syncfusion-blazor-toolkit-charts/references/appearance-styling.md b/skills/syncfusion-blazor-toolkit-charts/references/appearance-styling.md new file mode 100644 index 0000000..627ee46 --- /dev/null +++ b/skills/syncfusion-blazor-toolkit-charts/references/appearance-styling.md @@ -0,0 +1,1170 @@ +# Syncfusion Blazor Charts - Appearance and Styling Reference + +This comprehensive reference guide covers all aspects of appearance customization and styling for Syncfusion Blazor Charts. Use this guide to create visually appealing and responsive chart visualizations. + +## Table of Contents + +- [Chart Dimensions](#chart-dimensions) + - [Default Dimensions](#default-dimensions) + - [Pixel-Based Sizing](#pixel-based-sizing) + - [Percentage-Based Sizing](#percentage-based-sizing) + - [Container-Based Sizing](#container-based-sizing) +- [Color Customization](#color-customization) + - [Custom Color Palette](#custom-color-palette) + - [Series-Specific Colors](#series-specific-colors) + - [Point-Level Color Customization](#point-level-color-customization) +- [Chart Background and Border](#chart-background-and-border) + - [Background Color](#background-color) + - [Border Styling](#border-styling) + - [Combined Background and Border](#combined-background-and-border) +- [Chart Area Customization](#chart-area-customization) + - [Chart Area Background](#chart-area-background) + - [Chart Area Border](#chart-area-border) + - [Chart Area Width](#chart-area-width) +- [Chart Margins](#chart-margins) + - [Basic Margin Configuration](#basic-margin-configuration) + - [Asymmetric Margins](#asymmetric-margins) +- [Title and Subtitle Styling](#title-and-subtitle-styling) + - [Title Styling](#title-styling) + - [Title and Subtitle Combined](#title-and-subtitle-combined) + - [Title Position Customization](#title-position-customization) +- [Theme Support](#theme-support) + - [Built-in Themes](#built-in-themes) + - [Custom Theme Colors](#custom-theme-colors) +- [Series Styling](#series-styling) + - [Fill Color and Opacity](#fill-color-and-opacity) + - [Series Border Styling](#series-border-styling) + - [Series Animation](#series-animation) +- [Chart Responsiveness](#chart-responsiveness) + - [Responsive Percentage Sizing](#responsive-percentage-sizing) + - [Container-Based Responsive Charts](#container-based-responsive-charts) +- [Styling Best Practices](#styling-best-practices) + - [Design Guidelines](#design-guidelines) + - [Performance Tips](#performance-tips) + - [Accessibility Considerations](#accessibility-considerations) + - [Troubleshooting Common Issues](#troubleshooting-common-issues) +- [Complete Styling Example](#complete-styling-example) +- [Summary](#summary) + + +## Chart Dimensions + +Control the size of your chart using width and height properties. Charts can be sized using pixels, percentages, or container-based sizing. + +### Default Dimensions + +When no size is specified, charts render with default dimensions: +- **Default Width**: 600px +- **Default Height**: 450px + +### Pixel-Based Sizing + +Define exact chart dimensions in pixels for precise control: + +```razor +@using Syncfusion.Blazor.Toolkit.Charts + + + + + + + + + +@code { + public class SalesInfo + { + public string Month { get; set; } + public double Revenue { get; set; } + } + + public List SalesData = new List + { + new SalesInfo { Month = "Jan", Revenue = 35 }, + new SalesInfo { Month = "Feb", Revenue = 28 }, + new SalesInfo { Month = "Mar", Revenue = 34 }, + new SalesInfo { Month = "Apr", Revenue = 32 }, + new SalesInfo { Month = "May", Revenue = 40 } + }; +} +``` + +### Percentage-Based Sizing + +Use percentages to make charts responsive to their container: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public class RevenueInfo + { + public string Quarter { get; set; } + public double Amount { get; set; } + } + + public List RevenueData = new List + { + new RevenueInfo { Quarter = "Q1", Amount = 120000 }, + new RevenueInfo { Quarter = "Q2", Amount = 135000 }, + new RevenueInfo { Quarter = "Q3", Amount = 145000 }, + new RevenueInfo { Quarter = "Q4", Amount = 160000 } + }; +} +``` + +### Container-Based Sizing + +Scale charts to fit within a container using CSS styles: + +```razor +@using Syncfusion.Blazor.Charts + +
+ + + + + + + +
+ +@code { + public class MetricInfo + { + public string Metric { get; set; } + public double Value { get; set; } + } + + public List MetricsData = new List + { + new MetricInfo { Metric = "Speed", Value = 85 }, + new MetricInfo { Metric = "Quality", Value = 92 }, + new MetricInfo { Metric = "Efficiency", Value = 78 } + }; +} +``` + +--- + +## Color Customization + +Control chart colors through color palettes, series-specific colors, and point-level customization. + +### Custom Color Palette + +Define a custom palette to apply colors consistently across all series: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + +@code { + public class MedalInfo + { + public string Country { get; set; } + public double Gold { get; set; } + public double Silver { get; set; } + public double Bronze { get; set; } + } + + public List MedalData = new List + { + new MedalInfo { Country = "USA", Gold = 46, Silver = 37, Bronze = 38 }, + new MedalInfo { Country = "China", Gold = 38, Silver = 32, Bronze = 18 }, + new MedalInfo { Country = "UK", Gold = 27, Silver = 23, Bronze = 17 }, + new MedalInfo { Country = "Japan", Gold = 27, Silver = 14, Bronze = 17 } + }; + + public string[] CustomPalette = new string[] { "#FFD700", "#C0C0C0", "#CD7F32" }; +} +``` + +### Series-Specific Colors + +Apply individual colors to each series using the Fill property: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + +@code { + public class ProductInfo + { + public string Product { get; set; } + public double Sales { get; set; } + public double Target { get; set; } + } + + public List ProductData = new List + { + new ProductInfo { Product = "Laptop", Sales = 120, Target = 150 }, + new ProductInfo { Product = "Phone", Sales = 210, Target = 200 }, + new ProductInfo { Product = "Tablet", Sales = 80, Target = 100 } + }; +} +``` + +### Point-Level Color Customization + +Customize individual data point colors: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public class ProjectPhase + { + public string Phase { get; set; } + public double Completion { get; set; } + public string Color { get; set; } + } + + public List ProjectData = new List + { + new ProjectPhase { Phase = "Planning", Completion = 100, Color = "#4CAF50" }, + new ProjectPhase { Phase = "Development", Completion = 75, Color = "#FF9800" }, + new ProjectPhase { Phase = "Testing", Completion = 40, Color = "#F44336" }, + new ProjectPhase { Phase = "Deployment", Completion = 0, Color = "#9E9E9E" } + }; +} +``` + +--- + +## Chart Background and Border + +Customize the overall appearance of your chart with background colors and borders. + +### Background Color + +Set the chart background using the Background property: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public class TempInfo + { + public string Month { get; set; } + public double Temp { get; set; } + } + + public List TemperatureData = new List + { + new TempInfo { Month = "Jan", Temp = 15 }, + new TempInfo { Month = "Feb", Temp = 18 }, + new TempInfo { Month = "Mar", Temp = 22 }, + new TempInfo { Month = "Apr", Temp = 26 } + }; +} +``` + +### Border Styling + +Add borders to your chart with customizable color and width: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + +@code { + public class YearRevenue + { + public string Year { get; set; } + public double Revenue { get; set; } + } + + public List RevenueData = new List + { + new YearRevenue { Year = "2020", Revenue = 1200000 }, + new YearRevenue { Year = "2021", Revenue = 1450000 }, + new YearRevenue { Year = "2022", Revenue = 1680000 }, + new YearRevenue { Year = "2023", Revenue = 1920000 } + }; +} +``` + + +--- + +## Chart Area Customization + +The chart area is the region where data is plotted. Customize its background, border, and width. + +### Chart Area Background + +Set a distinct background for the plotting area: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + +@code { + public class QuarterlySales + { + public string Quarter { get; set; } + public double Sales { get; set; } + } + + public List SalesData = new List + { + new QuarterlySales { Quarter = "Q1", Sales = 150000 }, + new QuarterlySales { Quarter = "Q2", Sales = 175000 }, + new QuarterlySales { Quarter = "Q3", Sales = 195000 }, + new QuarterlySales { Quarter = "Q4", Sales = 220000 } + }; +} +``` + +### Chart Area Border + +Add a border around the chart plotting area: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + +@code { + public class CustomerInfo + { + public string Month { get; set; } + public double Customers { get; set; } + } + + public List CustomerData = new List + { + new CustomerInfo { Month = "Jan", Customers = 1200 }, + new CustomerInfo { Month = "Feb", Customers = 1450 }, + new CustomerInfo { Month = "Mar", Customers = 1680 }, + new CustomerInfo { Month = "Apr", Customers = 1920 } + }; +} +``` + +### Chart Area Width + +Control the width of the chart area as a percentage: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + +@code { + public class ExpenseCategory + { + public string Category { get; set; } + public double Amount { get; set; } + } + + public List ExpenseData = new List + { + new ExpenseCategory { Category = "Housing", Amount = 2500 }, + new ExpenseCategory { Category = "Food", Amount = 800 }, + new ExpenseCategory { Category = "Transport", Amount = 500 }, + new ExpenseCategory { Category = "Entertainment", Amount = 400 } + }; +} +``` + +--- + +## Chart Margins + +Configure spacing between the chart and its container using margin properties. + +### Basic Margin Configuration + +Set uniform margins around the chart: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + +@code { + public class TrafficInfo + { + public string Hour { get; set; } + public double Visitors { get; set; } + } + + public List TrafficData = new List + { + new TrafficInfo { Hour = "8 AM", Visitors = 320 }, + new TrafficInfo { Hour = "12 PM", Visitors = 580 }, + new TrafficInfo { Hour = "4 PM", Visitors = 720 }, + new TrafficInfo { Hour = "8 PM", Visitors = 450 } + }; +} +``` + +### Asymmetric Margins + +Apply different margins to each side: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + +@code { + public class AssetInfo + { + public string Asset { get; set; } + public double Value { get; set; } + } + + public List InvestmentData = new List + { + new AssetInfo { Asset = "Stocks", Value = 45000 }, + new AssetInfo { Asset = "Bonds", Value = 30000 }, + new AssetInfo { Asset = "Real Estate", Value = 80000 }, + new AssetInfo { Asset = "Commodities", Value = 15000 } + }; +} +``` + +--- + +## Title and Subtitle Styling + +Customize chart titles and subtitles with font properties, colors, and positioning. + +### Title Styling + +Apply custom styling to the chart title: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + +@code { + public class AnnualRevenue + { + public string Year { get; set; } + public double Revenue { get; set; } + } + + public List AnnualData = new List + { + new AnnualRevenue { Year = "2020", Revenue = 850000 }, + new AnnualRevenue { Year = "2021", Revenue = 920000 }, + new AnnualRevenue { Year = "2022", Revenue = 1050000 }, + new AnnualRevenue { Year = "2023", Revenue = 1180000 } + }; +} +``` + +### Title and Subtitle Combined + +Add both title and subtitle with distinct styling: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + +@code { + public class SurveyResult + { + public string Department { get; set; } + public double Score { get; set; } + } + + public List SurveyData = new List + { + new SurveyResult { Department = "Engineering", Score = 4.5 }, + new SurveyResult { Department = "Sales", Score = 4.2 }, + new SurveyResult { Department = "HR", Score = 4.8 }, + new SurveyResult { Department = "Finance", Score = 4.3 } + }; +} +``` + +### Title Position Customization + +Position the title at different locations: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + +@code { + public class WebTraffic + { + public string Month { get; set; } + public double Visits { get; set; } + } + + public List TrafficData = new List + { + new WebTraffic { Month = "Jan", Visits = 12500 }, + new WebTraffic { Month = "Feb", Visits = 14200 }, + new WebTraffic { Month = "Mar", Visits = 16800 }, + new WebTraffic { Month = "Apr", Visits = 18300 } + }; +} +``` + +--- + +## Theme Support + +Syncfusion Blazor Charts support built-in themes and custom theme creation. + +### Built-in Themes + +Apply predefined themes by including the theme API: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public class ProductPerformance + { + public string Product { get; set; } + public double Rating { get; set; } + } + + public List PerformanceData = new List + { + new ProductPerformance { Product = "Product A", Rating = 4.5 }, + new ProductPerformance { Product = "Product B", Rating = 3.8 }, + new ProductPerformance { Product = "Product C", Rating = 4.2 }, + new ProductPerformance { Product = "Product D", Rating = 4.7 } + }; +} +``` + +**Available Built-in Themes:** +- Material +- Bootstrap +- Bootstrap 4 +- Bootstrap 5 +- Fabric +- Tailwind +- Material 3 +- Fluent +- High Contrast + +### Custom Theme Colors + +Create a custom appearance by overriding default palette: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public class RegionalSales + { + public string Region { get; set; } + public double Sales { get; set; } + } + + public List RegionalData = new List + { + new RegionalSales { Region = "North", Sales = 125000 }, + new RegionalSales { Region = "South", Sales = 98000 }, + new RegionalSales { Region = "East", Sales = 112000 }, + new RegionalSales { Region = "West", Sales = 135000 } + }; + + // Custom corporate color palette + public string[] CustomThemePalette = new string[] + { + "#0066CC", "#FF6600", "#339933", "#CC0066", "#9933FF" + }; +} +``` + +--- + +## Series Styling + +Customize individual series appearance including fill colors, opacity, and borders. + +### Fill Color and Opacity + +Control series fill color and transparency: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + +@code { + public class QuarterComparison + { + public string Quarter { get; set; } + public double Current { get; set; } + public double Previous { get; set; } + } + + public List ComparisonData = new List + { + new QuarterComparison { Quarter = "Q1", Current = 85000, Previous = 78000 }, + new QuarterComparison { Quarter = "Q2", Current = 92000, Previous = 85000 }, + new QuarterComparison { Quarter = "Q3", Current = 98000, Previous = 90000 }, + new QuarterComparison { Quarter = "Q4", Current = 105000, Previous = 95000 } + }; +} +``` + +### Series Border Styling + +Add borders to series elements: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + +@code { + public class TrendInfo + { + public string Month { get; set; } + public double Value { get; set; } + } + + public List TrendData = new List + { + new TrendInfo { Month = "Jan", Value = 450 }, + new TrendInfo { Month = "Feb", Value = 520 }, + new TrendInfo { Month = "Mar", Value = 480 }, + new TrendInfo { Month = "Apr", Value = 590 } + }; +} +``` + +### Series Animation + +Configure animation properties for series: + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + +@code { + public class GrowthInfo + { + public string Year { get; set; } + public double Growth { get; set; } + } + + public List GrowthData = new List + { + new GrowthInfo { Year = "2019", Growth = 5.2 }, + new GrowthInfo { Year = "2020", Growth = 6.8 }, + new GrowthInfo { Year = "2021", Growth = 7.5 }, + new GrowthInfo { Year = "2022", Growth = 8.2 }, + new GrowthInfo { Year = "2023", Growth = 9.1 } + }; +} +``` + +--- + +## Chart Responsiveness + +Ensure charts adapt to different screen sizes and orientations. + +### Responsive Percentage Sizing + +Use percentage-based dimensions for automatic responsiveness: + +```razor +@using Syncfusion.Blazor.Charts + +
+ + + + + + + +
+ + + +@code { + public class DashboardMetric + { + public string Metric { get; set; } + public double Value { get; set; } + } + + public List DashboardData = new List + { + new DashboardMetric { Metric = "Users", Value = 15000 }, + new DashboardMetric { Metric = "Sessions", Value = 45000 }, + new DashboardMetric { Metric = "Pageviews", Value = 120000 } + }; +} +``` + +### Container-Based Responsive Charts + +Create fully responsive charts that adapt to parent container: + +```razor +@using Syncfusion.Blazor.Charts + +
+ + + + + + + +
+ +@code { + public class FlexInfo + { + public string Category { get; set; } + public double Amount { get; set; } + } + + public List FlexData = new List + { + new FlexInfo { Category = "A", Amount = 120 }, + new FlexInfo { Category = "B", Amount = 150 }, + new FlexInfo { Category = "C", Amount = 180 }, + new FlexInfo { Category = "D", Amount = 140 } + }; +} +``` + +--- + +## Styling Best Practices + +Follow these guidelines for optimal chart appearance and performance. + +### Design Guidelines + +**Color Selection:** +- Use color palettes with sufficient contrast for accessibility +- Limit palette to 5-7 distinct colors for clarity +- Ensure colors are distinguishable for colorblind users +- Use consistent colors across related charts + +**Typography:** +- Choose readable fonts (12px minimum for labels) +- Use font weights to establish hierarchy (bold titles, regular labels) +- Ensure sufficient contrast between text and background + +**Spacing:** +- Provide adequate margins (30-50px minimum) +- Use chart area width of 80-90% for balanced appearance +- Leave space for legends and labels + +### Performance Tips + +**Optimize Rendering:** +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + +@code { + public class OptimizedDataPoint + { + public string Item { get; set; } + public double Value { get; set; } + } + + public List OptimizedData = new List + { + new OptimizedDataPoint { Item = "Item 1", Value = 45 }, + new OptimizedDataPoint { Item = "Item 2", Value = 62 }, + new OptimizedDataPoint { Item = "Item 3", Value = 38 } + }; +} +``` + +**Animation Best Practices:** +- Use animations sparingly for data updates +- Keep duration between 500-2000ms +- Disable animations for large datasets (>1000 points) + +### Accessibility Considerations + +```razor +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + +@code { + public class AccessibleDataPoint + { + public string Label { get; set; } + public double Value { get; set; } + } + + public List AccessibleData = new List + { + 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 `` tag: + +```html + + + + + +``` + +**Note:** The Chart component script is included in `syncfusion-blazor.min.js`. For individual component scripts: +```html + +``` + +## Creating Your First Chart + +### Basic Empty Chart + +Create a new Razor page (e.g., `ChartDemo.razor`) and add: + +```razor +@page "/chart-demo" +@using Syncfusion.Blazor.Toolkit.Charts + + + +``` + +This renders an empty chart container. + +### Chart with Data + +#### Step 1: Define Data Model + +```razor +@code { + public class SalesInfo + { + public string Month { get; set; } + public double SalesValue { get; set; } + } + + public List SalesData = new List + { + new SalesInfo { Month = "Jan", SalesValue = 35 }, + new SalesInfo { Month = "Feb", SalesValue = 28 }, + new SalesInfo { Month = "Mar", SalesValue = 34 }, + new SalesInfo { Month = "Apr", SalesValue = 32 }, + new SalesInfo { Month = "May", SalesValue = 40 }, + new SalesInfo { Month = "Jun", SalesValue = 32 }, + new SalesInfo { Month = "Jul", SalesValue = 35 } + }; +} +``` + +#### Step 2: Configure Chart with Series + +```razor + + + + + + + + + +``` + +**Key Properties:** +- `ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category"` - Treats X-axis as discrete categories +- `DataSource` - Binds the data collection +- `XName` - Property name for X-axis values (`Month`) +- `YName` - Property name for Y-axis values (`SalesValue`) +- `Type` - Chart type (`Column`, `Line`, `Bar`, etc.) + +### Adding Titles + +Add titles to the chart and axes for context: + +```razor + + + + + + + + + + + + +``` + +### Adding Data Labels + +Display values on data points: + +```razor + + + + + + + + + + + + +``` + +### Enabling Tooltips + +Show data on hover: + +```razor + + + + + + + + + + + +``` + +### Adding Legend + +Enable legend for multi-series charts: + +```razor + + + + + + + + + + + +``` + +**Note:** The `Name` property sets the legend text for each series. + +## Complete Example + +Here's a complete working example combining all elements: + +```razor +@page "/chart-demo" +@using Syncfusion.Blazor.Toolkit.Charts + +

Monthly Sales Analysis

+ + + + + + + + + + + + + + + + + + + + +@code { + public class SalesInfo + { + public string Month { get; set; } + public double SalesValue { get; set; } + } + + public List SalesData = new List + { + new SalesInfo { Month = "Jan", SalesValue = 35 }, + new SalesInfo { Month = "Feb", SalesValue = 28 }, + new SalesInfo { Month = "Mar", SalesValue = 34 }, + new SalesInfo { Month = "Apr", SalesValue = 32 }, + new SalesInfo { Month = "May", SalesValue = 40 }, + new SalesInfo { Month = "Jun", SalesValue = 32 }, + new SalesInfo { Month = "Jul", SalesValue = 35 } + }; +} +``` + +## Running the Application + +### Visual Studio +- Press `Ctrl + F5` (Windows) or `⌘ + F5` (macOS) + +### Visual Studio Code / .NET CLI +```bash +dotnet run +``` + +Navigate to the chart page URL (e.g., `https://localhost:5001/chart-demo`) + +## Multiple Series Example + +To compare multiple datasets: + +```razor + + + + + + + + + + + + + + + +@code { + public class ProductSales + { + public string Month { get; set; } + public double Sales { get; set; } + } + + public List Product1Data = new List + { + new ProductSales { Month = "Jan", Sales = 35 }, + new ProductSales { Month = "Feb", Sales = 28 }, + new ProductSales { Month = "Mar", Sales = 34 } + }; + + public List Product2Data = new List + { + new ProductSales { Month = "Jan", Sales = 20 }, + new ProductSales { Month = "Feb", Sales = 35 }, + new ProductSales { Month = "Mar", Sales = 30 } + }; +} +``` + +## Common Setup Issues + +### Issue: Chart Not Rendering + +**Cause:** Missing service registration or script reference + +**Solution:** +1. Verify `AddSyncfusionBlazor()` in `Program.cs` +2. Check script reference in `App.razor` +3. Ensure namespaces in `_Imports.razor` + +### Issue: No Data Displayed + +**Cause:** Incorrect property binding + +**Solution:** +- Verify `XName` and `YName` match data model properties exactly (case-sensitive) +- Ensure `DataSource` is populated before rendering + +### Issue: Interactive Mode Error + +**Cause:** Component requires interactivity + +**Solution:** Add render mode at page top: +```razor +@rendermode InteractiveServer +``` + +Or configure globally in `App.razor`. + +## Next Steps + +After setting up your first chart: +- Explore different chart types (Line, Area, Column/Bar, Scatter, Bubble, Spline) +- Customize axes (numeric, datetime, logarithmic) +- Add interactive features (zooming, selection, crosshair) +- Implement data binding with DataManager +- Style with themes and custom colors +- Add annotations and markers + +## Additional Resources + +- **NuGet Package:** [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts) +- **API Documentation:** [Chart API Reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.html) +- **Live Demos:** [Blazor Chart Demos](https://blazor.syncfusion.com/demos/chart/line) +- **GitHub Samples:** [Blazor Chart Examples](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart) diff --git a/skills/syncfusion-blazor-toolkit-charts/references/interactive-features.md b/skills/syncfusion-blazor-toolkit-charts/references/interactive-features.md new file mode 100644 index 0000000..fbdd75b --- /dev/null +++ b/skills/syncfusion-blazor-toolkit-charts/references/interactive-features.md @@ -0,0 +1,699 @@ +# Interactive Features Reference + +## Table of Contents + +- [Tooltips](#tooltips) + - [Basic Tooltip](#basic-tooltip) + - [Tooltip Formatting](#tooltip-formatting) + - [Custom Tooltip Templates](#custom-tooltip-templates) + - [Shared Tooltips](#shared-tooltips) +- [Crosshair](#crosshair) + - [Enabling Crosshair](#enabling-crosshair) + - [Snap to Data](#snap-to-data) + - [Crosshair Customization](#crosshair-customization) + - [Crosshair Tooltips](#crosshair-tooltips) +- [Trackball](#trackball) + - [Enabling Trackball](#enabling-trackball) + - [Trackball Customization](#trackball-customization) +- [Selection](#selection) + - [Point Selection](#point-selection) + - [Series Selection](#series-selection) + - [Cluster Selection](#cluster-selection) + - [Drag Selection](#drag-selection) + - [Selection Modes](#selection-modes) +- [Zooming and Panning](#zooming-and-panning) + - [Selection Zooming](#selection-zooming) + - [Mouse Wheel Zooming](#mouse-wheel-zooming) + - [Pinch Zooming](#pinch-zooming) + - [Zoom Modes](#zoom-modes) + - [Zoom Toolbar](#zoom-toolbar) + - [Panning](#panning) +- [Interactive Best Practices](#interactive-best-practices) + - [Tooltip Guidelines](#tooltip-guidelines) + - [Crosshair Best Practices](#crosshair-best-practices) + - [Selection Recommendations](#selection-recommendations) + - [Zooming Best Practices](#zooming-best-practices) + - [Performance Tips](#performance-tips) + - [Accessibility Considerations](#accessibility-considerations) + +## Tooltips + +Tooltips display information about data points on mouse hover or touch. + +### Basic Tooltip + +Enable tooltips using `ChartTooltipSettings`: + +```razor + + + + + + + + + + + +@code { + public List SalesData = new List + { + new SalesInfo { Month = "Jan", Revenue = 35 }, + new SalesInfo { Month = "Feb", Revenue = 28 }, + new SalesInfo { Month = "Mar", Revenue = 42 }, + new SalesInfo { Month = "Apr", Revenue = 38 } + }; +} +``` + +### Tooltip Formatting + +Customize tooltip content using the `Format` property: + +```razor + + + + + + + + +``` + +**Format Placeholders:** +- `${point.x}` - X-axis value +- `${point.y}` - Y-axis value +- `${series.name}` - Series name +- `${point.index}` - Point index +- HTML tags supported for formatting + +### Custom Tooltip Templates + +Create fully custom tooltips with Razor templates: + +```razor + + + +``` + +**Template with Conditional Styling:** + +```razor + + + +``` + +**Multi-Series Tooltip Template:** + +```razor + + + +``` + +### Shared Tooltips + +Display all series data points in a single tooltip: + +```razor + + + + + + + + + + + + + + + + + +``` + +**Tooltip Appearance Customization:** + +```razor + + +@code { + ChartCommonFont tooltipStyle = new ChartCommonFont + { + Size = "13px", + Color = "#FFFFFF", + FontWeight = "500", + FontFamily = "Segoe UI" + }; +} +``` + +--- + +## Crosshair + +Crosshair displays vertical and horizontal lines to precisely identify data point coordinates. + +### Enabling Crosshair + +Enable crosshair using `ChartCrosshairSettings`: + +```razor + + + + + + + + + + + + + + + +``` + +### Snap to Data + +Make crosshair snap to nearest data point instead of exact mouse position: + +```razor + + + +``` + +### Crosshair Customization + +Customize crosshair line appearance and behavior: + +```razor + + + + + + + + + + + + + + + +``` + +### Crosshair Tooltips + +Configure axis-specific crosshair tooltips: + +```razor + + + + + + + + + + + +``` + +--- + +## Trackball + +Trackball is similar to crosshair but displays tooltips for all series at the crosshair position. + +### Enabling Trackball + +Enable trackball mode by combining crosshair with shared tooltips: + +```razor + + + + + + + + + + + + + + + + +``` + +### Trackball Customization + +Customize trackball appearance and behavior: + +```razor + + + + + + + +``` + +--- + +## Selection + +Allow users to select data points, series, or regions for highlighting or further analysis. + +### Point Selection + +Select individual data points: + +```razor + + + + + + + + + + +@code { + string selectionStyle = "fill: #FF5722; opacity: 1;"; +} +``` + +### Series Selection + +Select entire series: + +```razor + + + + + + + +``` + +### Cluster Selection + +Select all points at the same index across series: + +```razor + + + + + + + + + +``` + +### Drag Selection + +Enable rectangular drag selection: + +```razor + + + + + + + + + +``` + +**Drag Selection Modes:** +- `DragXY` - Rectangle selection in both directions +- `DragX` - Horizontal selection only +- `DragY` - Vertical selection only + +### Selection Modes + +Configure selection behavior and appearance: + +```razor + + + + + +``` + +**Multi-Select with Ctrl Key:** + +```razor + + + + + +``` + +**Selection Events:** + +```razor + + + + + + +@code { + private void HandleSelectionComplete(SelectionCompleteEventArgs args) + { + var selectedPoints = args.SelectedDataValues; + Console.WriteLine($"Selected {selectedPoints.Count} points"); + + foreach (var point in selectedPoints) + { + Console.WriteLine($"X: {point.X}, Y: {point.Y}"); + } + } +} +``` + +--- + +## Zooming and Panning + +Enable users to zoom into chart regions and pan across data. + +### Selection Zooming + +Enable selection-based zooming (drag to select region): + +```razor + + + + + + + + + +``` + +### Mouse Wheel Zooming + +Enable zoom with mouse wheel: + +```razor + +``` + +### Pinch Zooming + +Enable pinch-to-zoom for touch devices: + +```razor + +``` + +**All Zoom Modes Combined:** + +```razor + + + + + + + + + +``` + +### Zoom Modes + +Control zoom direction: + +```razor + + + + + + + + +``` + +### Zoom Toolbar + +Customize the zoom toolbar that appears after zooming: + +```razor + + +@code { + private List zoomToolbarItems = new List + { + ToolbarItems.Zoom, + ToolbarItems.ZoomIn, + ToolbarItems.ZoomOut, + ToolbarItems.Pan, + ToolbarItems.Reset + }; +} +``` + +**Hide Specific Toolbar Items:** + +```razor +@code { + private List customToolbar = new List + { + ToolbarItems.Reset, + ToolbarItems.Pan + }; +} + + +``` + +### Panning + +Enable panning after zooming: + +```razor + +``` + +**Programmatic Zoom:** + +```razor + + + + + + + + + + + +@code { + private SfChart chartObj; + + private void ZoomIn() + { + chartObj.ZoomByFactor(1.5); + } + + private void ZoomOut() + { + chartObj.ZoomByFactor(0.5); + } + + private void ResetZoom() + { + chartObj.ZoomByRange(new DateTime(2020, 1, 1), new DateTime(2024, 12, 31)); + } +} +``` + +--- + +## Interactive Best Practices + +### Tooltip Guidelines + +1. **Keep tooltips concise** - Display only essential information +2. **Use formatting** - Format numbers consistently (currency, decimals) +3. **Enable shared tooltips** for multi-series comparisons +4. **Add visual cues** - Use colors, icons, or markers in templates +5. **Test on mobile** - Ensure tooltips work well with touch interactions + +### Crosshair Best Practices + +1. **Use with line charts** - Most effective for time-series or continuous data +2. **Enable snap-to-data** - Provides precise data point information +3. **Customize colors** - Match crosshair to chart theme +4. **Combine with tooltips** - Provide complete data context + +### Selection Recommendations + +1. **Choose appropriate mode** - Point for detail, Series for comparison, Cluster for correlation +2. **Provide visual feedback** - Use distinct selection colors +3. **Enable multi-select** when users need to compare multiple points +4. **Handle selection events** - Implement actions based on user selections + +### Zooming Best Practices + +1. **Enable multiple zoom methods** - Selection, mouse wheel, and pinch for accessibility +2. **Set appropriate zoom modes** - X for time-series, XY for scatter plots +3. **Always include reset** - Allow users to return to original view +4. **Consider data volume** - Enable scrollbar for large datasets +5. **Test zoom limits** - Prevent excessive zoom that obscures data + +### Performance Tips + +1. **Limit tooltip complexity** - Avoid heavy computations in tooltip templates +2. **Throttle crosshair updates** on large datasets +3. **Use selection judiciously** - Avoid enabling all selection modes simultaneously +4. **Optimize zoom rendering** - Consider virtualization for very large datasets +5. **Test on target devices** - Ensure smooth interactions on mobile and desktop + +### Accessibility Considerations + +1. **Provide keyboard navigation** for selection and zooming +2. **Ensure tooltip contrast** - Maintain WCAG AA compliance +3. **Support screen readers** - Use ARIA labels where appropriate +4. **Test with assistive technologies** - Verify all interactive features are accessible +5. **Offer alternative data access** - Provide data tables or exports for users who cannot use interactive features diff --git a/skills/syncfusion-blazor-toolkit-charts/references/legend.md b/skills/syncfusion-blazor-toolkit-charts/references/legend.md new file mode 100644 index 0000000..44372ff --- /dev/null +++ b/skills/syncfusion-blazor-toolkit-charts/references/legend.md @@ -0,0 +1,585 @@ +## Table of Contents + +- [Basic Legend Implementation](#basic-legend-implementation) +- [Legend Positioning](#legend-positioning) + - [Standard Positions](#standard-positions) + - [Custom Positioning](#custom-positioning) + - [Legend Alignment](#legend-alignment) +- [Legend Order and Reversal](#legend-order-and-reversal) + - [Reverse Legend Order](#reverse-legend-order) +- [Legend Appearance Customization](#legend-appearance-customization) + - [Legend Shape](#legend-shape) + - [Legend Size](#legend-size) + - [Legend Shape Size](#legend-shape-size) + - [Legend Padding and Spacing](#legend-padding-and-spacing) + - [Legend Text Styling](#legend-text-styling) + - [Legend Border](#legend-border) +- [Legend Paging](#legend-paging) +- [Legend Text Handling](#legend-text-handling) + - [Text Wrapping](#text-wrapping) +- [Legend Interactivity](#legend-interactivity) + - [Toggle Series Visibility](#toggle-series-visibility) + - [Disable Toggle Visibility](#disable-toggle-visibility) +- [Hiding Legend Items](#hiding-legend-items) + - [Hide Specific Series from Legend](#hide-specific-series-from-legend) +- [Legend Templates](#legend-templates) +- [Practical Legend Patterns](#practical-legend-patterns) + - [Multi-Series with Custom Shapes](#multi-series-with-custom-shapes) + - [Styled Legend with Border](#styled-legend-with-border) + - [Compact Legend](#compact-legend) +- [Legend Best Practices](#legend-best-practices) + - [Naming Conventions](#naming-conventions) + - [Visual Design](#visual-design) + - [Interaction Guidelines](#interaction-guidelines) + - [Performance Considerations](#performance-considerations) + - [Accessibility](#accessibility) +- [Legend with Chart Types](#legend-with-chart-types) + - [Legend for Line Charts](#legend-for-line-charts) + - [Legend for Stacked Charts](#legend-for-stacked-charts) +- [Troubleshooting Common Issues](#troubleshooting-common-issues) + - [Legend Not Visible](#legend-not-visible) + - [Legend Text Truncated](#legend-text-truncated) + - [Legend Overlaps Chart](#legend-overlaps-chart) + - [Too Many Legend Items](#too-many-legend-items) + - [Legend Click Not Working](#legend-click-not-working) + +# Legend Reference + +Legend provides information about the series displayed in the chart, helping users identify and differentiate multiple data series. + +## Basic Legend Implementation + +Enable legend by setting `Visible="true"` in `ChartLegendSettings`: + +```razor + + + + + + + + + + + + +@code { + public class ChartData + { + public string Country { get; set; } + public double Gold { get; set; } + public double Silver { get; set; } + public double Bronze { get; set; } + } + + public List MedalDetails = new List + { + new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, + new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, + new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 } + }; +} +``` + +## Legend Positioning + +### Standard Positions + +Position legend at different locations using the `Position` property: + +```razor + + + + + + + + + + + +``` + +### Custom Positioning + +Place legend at specific coordinates: + +```razor + + + +``` + +### Legend Alignment + +Control alignment within the legend area: + +```razor + + + + + + + + +``` + +**Position and Alignment Combined:** + +```razor + +``` + +## Legend Order and Reversal + +### Reverse Legend Order + +Reverse the order of legend items: + +```razor + +``` + +By default, the first series appears first in the legend. When `Reverse="true"`, the last series appears first. + +## Legend Appearance Customization + +### Legend Shape + +Customize legend icon shape per series using `LegendShape`: + +```razor + + + +``` + +**Available Legend Shapes:** +- `SeriesType` - Matches the series type (default) +- `Circle` - Circular icon +- `Rectangle` - Rectangular icon +- `Diamond` - Diamond-shaped icon +- `Triangle` - Triangular icon +- `InvertedTriangle` - Inverted triangle +- `Pentagon` - Five-sided icon +- `Cross` - Cross/plus icon +- `HorizontalLine` - Horizontal line +- `VerticalLine` - Vertical line + +### Legend Size + +Control overall legend dimensions: + +```razor + + + +``` + +**Default Sizes:** +- Top/Bottom position: 20-25% of chart height +- Left/Right position: 20-25% of chart width + +### Legend Shape Size + +Adjust legend icon dimensions: + +```razor + +``` + +### Legend Padding and Spacing + +Control spacing within legend: + +```razor + +``` + +**Padding Properties:** +- `ItemPadding` - Space between legend items +- `ShapePadding` - Space between shape and text +- `Padding` - Padding around the legend container + +### Legend Text Styling + +Customize legend text appearance: + +```razor + + + +``` + +### Legend Border + +Add border around legend: + +```razor + + + +``` + +## Legend Paging + +When legend items exceed available space, automatic paging enables navigation buttons: + +```razor + + + +``` + +Paging is enabled automatically when content overflows. Users can navigate using arrow buttons. + +## Legend Text Handling + +### Text Wrapping + +Wrap legend text when it exceeds the container: + +```razor + +``` + +**Text Wrap Options:** +- `Normal` - No wrapping (default) +- `Wrap` - Wrap text to multiple lines +- `AnyWhere` - Wrap anywhere in the text + +**With Maximum Width:** + +```razor + + + +``` + +## Legend Interactivity + +### Toggle Series Visibility + +Click legend items to show/hide series (enabled by default): + +```razor + +``` + +### Disable Toggle Visibility + +Prevent series toggling when legend is clicked: + +```razor + +``` + +This is useful when combined with selection modes: + +```razor + + + + + + + + + +``` + +## Hiding Legend Items + +### Hide Specific Series from Legend + +Exclude a series from legend by setting its `Name` to empty string: + +```razor + + + + + + + +``` + +## Legend Templates + +Create fully custom legend items using templates: + +```razor + + + + + + + + +
+ 📊 +
+ Q1 Sales + Total: $@Q1Total M +
+
+ + + + + +
+ 📈 +
+ Q2 Sales + Total: $@Q2Total M +
+
+ + + + + +@code { + public List SalesData = new List + { + new QuarterData { Month = "Jan", Q1 = 35, Q2 = 42 }, + new QuarterData { Month = "Feb", Q1 = 28, Q2 = 38 }, + new QuarterData { Month = "Mar", Q1 = 42, Q2 = 45 } + }; + + public double Q1Total => SalesData.Sum(x => x.Q1); + public double Q2Total => SalesData.Sum(x => x.Q2); +} +``` + +**Template with Badges:** + +```razor + +
+ + @context.Name + NEW +
+ +``` + +**Template with Icons and Statistics:** + +```razor + + @{ + var series = context as ChartSeries; + var total = CalculateSeriesTotal(series); + var avg = CalculateSeriesAverage(series); + } +
+
+
+ @series.Name +
+
+
Total: @total.ToString("N0")
+
Avg: @avg.ToString("N1")
+
+
+ +``` + +## Practical Legend Patterns + +### Multi-Series with Custom Shapes + +```razor + + + + + + + + + + + + +``` + +### Styled Legend with Border + +```razor + + + + +``` + +### Compact Legend + +```razor + + + +``` + +## Legend Best Practices + +### Naming Conventions + +1. **Use clear, concise names** - Keep series names under 20 characters +2. **Be descriptive** - "Q1 2024 Revenue" better than "Q1" +3. **Avoid abbreviations** - Unless industry-standard (like "YTD", "QoQ") +4. **Use consistent naming** - Same format across all series + +### Visual Design + +1. **Position appropriately** - Bottom/top for horizontal charts, right/left for vertical +2. **Use custom shapes** - Differentiate series with distinct legend shapes +3. **Maintain readability** - Ensure sufficient padding and font size +4. **Consider chart size** - Adjust legend size relative to chart dimensions + +### Interaction Guidelines + +1. **Enable toggle by default** - Allow users to show/hide series +2. **Disable toggle for critical data** - When all series must remain visible +3. **Use paging wisely** - For charts with many series (>6) +4. **Test click targets** - Ensure legend items are easy to click/tap + +### Performance Considerations + +1. **Limit series count** - More than 10 series can overwhelm users +2. **Use templates sparingly** - Complex templates can impact rendering performance +3. **Optimize template content** - Keep template HTML minimal +4. **Consider legend size** - Large legends reduce chart display area + +### Accessibility + +1. **Provide text alternatives** - Use clear series names +2. **Ensure color contrast** - Legend text must be readable +3. **Support keyboard navigation** - Legend items should be keyboard accessible +4. **Test with screen readers** - Verify legend is announced correctly + +## Legend with Chart Types + +### Legend for Line Charts + +```razor + + + +``` + +### Legend for Stacked Charts + +```razor + + + + + + + +``` + +## Troubleshooting Common Issues + +### Legend Not Visible + +**Issue:** Legend doesn't appear +**Solution:** +- Ensure `Visible="true"` in `ChartLegendSettings` +- Verify series have `Name` property set +- Check if legend is positioned outside chart bounds + +### Legend Text Truncated + +**Issue:** Legend text cut off +**Solution:** +```razor + +``` + +### Legend Overlaps Chart + +**Issue:** Legend covers chart data +**Solution:** +- Adjust legend position: `Position="LegendPosition.Bottom"` +- Use custom positioning with appropriate coordinates +- Reduce legend size: `Width="200"` or `Height="60"` + +### Too Many Legend Items + +**Issue:** Legend is overcrowded +**Solution:** +- Enable paging by constraining legend size +- Group related series +- Hide non-essential series from legend +- Use hierarchical legend templates + +### Legend Click Not Working + +**Issue:** Clicking legend doesn't toggle series +**Solution:** +```razor + +``` + +Ensure `ToggleVisibility` is not set to `false`. diff --git a/skills/syncfusion-blazor-toolkit-charts/references/practical-examples.md b/skills/syncfusion-blazor-toolkit-charts/references/practical-examples.md new file mode 100644 index 0000000..13d5712 --- /dev/null +++ b/skills/syncfusion-blazor-toolkit-charts/references/practical-examples.md @@ -0,0 +1,718 @@ +# Practical Examples for Syncfusion Blazor Charts + +Complete, copy-paste-ready real-world examples demonstrating common chart implementation scenarios. + +## Table of Contents + +- [1. Sales Dashboard](#1-sales-dashboard) +- [2. Financial Stock Chart](#2-financial-stock-chart) +- [3. Performance Comparison](#3-performance-comparison) +- [4. Trend Analysis](#4-trend-analysis) +- [5. Regional Distribution](#5-regional-distribution) +- [6. Real-Time Monitoring](#6-real-time-monitoring) +- [7. Interactive Report](#7-interactive-report) +- [8. Responsive Analytics](#8-responsive-analytics) +- [Summary](#summary) + + +## 1. Sales Dashboard + +**Scenario:** Display monthly sales data for multiple products with interactive tooltips and legends. + +**When to use:** Business dashboards, sales reports, performance tracking. + +**Key features:** Multi-series line chart, custom colors, data labels, markers, legend. + +```razor +@page "/sales-dashboard" +@using Syncfusion.Blazor.Charts + +
+

Sales Performance Dashboard

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +@code { + public class SalesInfo + { + public string Month { get; set; } + public double ProductA { get; set; } + public double ProductB { get; set; } + public double ProductC { get; set; } + } + + public List SalesData = new List + { + new SalesInfo { Month = "Jan", ProductA = 35, ProductB = 28, ProductC = 42 }, + new SalesInfo { Month = "Feb", ProductA = 42, ProductB = 35, ProductC = 48 }, + new SalesInfo { Month = "Mar", ProductA = 48, ProductB = 42, ProductC = 55 }, + new SalesInfo { Month = "Apr", ProductA = 55, ProductB = 48, ProductC = 62 }, + new SalesInfo { Month = "May", ProductA = 62, ProductB = 55, ProductC = 68 }, + new SalesInfo { Month = "Jun", ProductA = 68, ProductB = 62, ProductC = 75 }, + new SalesInfo { Month = "Jul", ProductA = 75, ProductB = 68, ProductC = 82 }, + new SalesInfo { Month = "Aug", ProductA = 72, ProductB = 65, ProductC = 78 }, + new SalesInfo { Month = "Sep", ProductA = 78, ProductB = 72, ProductC = 85 }, + new SalesInfo { Month = "Oct", ProductA = 85, ProductB = 78, ProductC = 92 }, + new SalesInfo { Month = "Nov", ProductA = 88, ProductB = 82, ProductC = 95 }, + new SalesInfo { Month = "Dec", ProductA = 92, ProductB = 88, ProductC = 98 } + }; +} +``` + +--- + +## 2. Financial Stock Chart (removed) + +Note: Financial chart examples (candlestick, HILO, OHLC) have been removed — these chart types are not available in this build. + + { + public DateTime Date { get; set; } + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + } + + public List StockData = new List + { + new StockPrice { Date = new DateTime(2026, 1, 1), Open = 100, High = 105, Low = 98, Close = 103, Volume = 1200000 }, + new StockPrice { Date = new DateTime(2026, 1, 2), Open = 103, High = 108, Low = 102, Close = 107, Volume = 1350000 }, + new StockPrice { Date = new DateTime(2026, 1, 3), Open = 107, High = 110, Low = 105, Close = 108, Volume = 1400000 }, + new StockPrice { Date = new DateTime(2026, 1, 6), Open = 108, High = 112, Low = 106, Close = 110, Volume = 1500000 }, + new StockPrice { Date = new DateTime(2026, 1, 7), Open = 110, High = 113, Low = 108, Close = 109, Volume = 1300000 }, + new StockPrice { Date = new DateTime(2026, 1, 8), Open = 109, High = 111, Low = 105, Close = 106, Volume = 1450000 }, + new StockPrice { Date = new DateTime(2026, 1, 9), Open = 106, High = 109, Low = 104, Close = 108, Volume = 1250000 }, + new StockPrice { Date = new DateTime(2026, 1, 10), Open = 108, High = 115, Low = 107, Close = 113, Volume = 1600000 }, + new StockPrice { Date = new DateTime(2026, 1, 13), Open = 113, High = 118, Low = 112, Close = 116, Volume = 1700000 }, + new StockPrice { Date = new DateTime(2026, 1, 14), Open = 116, High = 120, Low = 114, Close = 118, Volume = 1800000 }, + new StockPrice { Date = new DateTime(2026, 1, 15), Open = 118, High = 122, Low = 116, Close = 120, Volume = 1650000 }, + new StockPrice { Date = new DateTime(2026, 1, 16), Open = 120, High = 123, Low = 117, Close = 119, Volume = 1550000 }, + new StockPrice { Date = new DateTime(2026, 1, 17), Open = 119, High = 121, Low = 115, Close = 117, Volume = 1400000 }, + new StockPrice { Date = new DateTime(2026, 1, 20), Open = 117, High = 119, Low = 113, Close = 115, Volume = 1350000 } + }; +} +``` + +--- + +## 3. Performance Comparison + +**Scenario:** Compare performance metrics across multiple teams and quarters. + +**When to use:** Performance reviews, team comparisons, quarterly reports. + +**Key features:** Grouped column chart, multiple categories, selection, highlighting. + +```razor +@page "/performance-comparison" +@using Syncfusion.Blazor.Charts + +
+

Quarterly Performance Comparison

+ + + + + + + + + + + + + + + + + + + + + + + + + + @if (!string.IsNullOrEmpty(SelectedInfo)) + { +
+

@SelectedInfo

+
+ } +
+ +@code { + public string SelectedInfo = ""; + + public class PerformanceMetric + { + public string Quarter { get; set; } + public double TeamAlpha { get; set; } + public double TeamBeta { get; set; } + public double TeamGamma { get; set; } + } + + public List PerformanceData = new List + { + new PerformanceMetric { Quarter = "Q1 2025", TeamAlpha = 75, TeamBeta = 70, TeamGamma = 80 }, + new PerformanceMetric { Quarter = "Q2 2025", TeamAlpha = 80, TeamBeta = 75, TeamGamma = 85 }, + new PerformanceMetric { Quarter = "Q3 2025", TeamAlpha = 85, TeamBeta = 82, TeamGamma = 88 }, + new PerformanceMetric { Quarter = "Q4 2025", TeamAlpha = 90, TeamBeta = 88, TeamGamma = 92 } + }; + + public void OnPointClick(PointEventArgs args) + { + SelectedInfo = $"Selected: {args.SeriesName} - {args.PointIndex} with value {args.Y}%"; + StateHasChanged(); + } +} +``` + +--- + +## 4. Trend Analysis + +**Scenario:** Analyze sales trends with forecasting and key milestone annotations. + +**When to use:** Trend forecasting, data analysis, strategic planning. + +**Key features:** Area chart, trend lines, forecasting, annotations. + +```razor +@page "/trend-analysis" +@using Syncfusion.Blazor.Charts + +
+

Sales Trend Analysis with Forecast

+ + + + + + + + + + + + + + + + + + +
+ Product Launch +
+ + + + +
+ Holiday Peak +
+ + + + +
+ +@code { + public class TrendInfo + { + public string Month { get; set; } + public double Revenue { get; set; } + } + + public List TrendData = new List + { + new TrendInfo { Month = "Jan", Revenue = 45 }, + new TrendInfo { Month = "Feb", Revenue = 52 }, + new TrendInfo { Month = "Mar", Revenue = 58 }, + new TrendInfo { Month = "Apr", Revenue = 65 }, + new TrendInfo { Month = "May", Revenue = 72 }, + new TrendInfo { Month = "Jun", Revenue = 95 }, + new TrendInfo { Month = "Jul", Revenue = 88 }, + new TrendInfo { Month = "Aug", Revenue = 92 }, + new TrendInfo { Month = "Sep", Revenue = 98 }, + new TrendInfo { Month = "Oct", Revenue = 105 }, + new TrendInfo { Month = "Nov", Revenue = 112 }, + new TrendInfo { Month = "Dec", Revenue = 120 } + }; +} +``` + +--- + +## 5. Regional Distribution + +**Regional Distribution (removed)** + +Note: Accumulation/Pie/Doughnut charts are not available in this build; regional-distribution examples have been removed. + + +--- + +## 6. Real-Time Monitoring + +**Scenario:** Monitor live metrics with auto-updating data stream. + +**When to use:** System monitoring, IoT dashboards, live sensor data. + +**Key features:** Live updates, dynamic data binding, auto-scroll, ObservableCollection. + +```razor +@page "/realtime-monitoring" +@using Syncfusion.Blazor.Charts +@using System.Collections.ObjectModel +@using System.Timers + +
+

Server CPU Monitoring (Live)

+ + + + + + + + + + + + + + + + + +
+

Current: @CurrentValue% | Average: @AverageValue% | Peak: @PeakValue%

+
+
+ +@code { + private SfChart liveChart; + private Timer updateTimer; + private Random random = new Random(); + private bool isMonitoring = false; + private int maxDataPoints = 20; + + public ObservableCollection LiveData = new ObservableCollection(); + + protected override void OnInitialized() + { + // Initialize with sample data + for (int i = 0; i < maxDataPoints; i++) + { + LiveData.Add(new MetricData + { + Timestamp = DateTime.Now.AddSeconds(i - maxDataPoints), + Value = random.Next(20, 60) + }); + } + } + + private void ToggleMonitoring() + { + if (isMonitoring) + { + StopMonitoring(); + } + else + { + StartMonitoring(); + } + } + + private void StartMonitoring() + { + isMonitoring = true; + updateTimer = new Timer(1000); // Update every second + updateTimer.Elapsed += UpdateData; + updateTimer.AutoReset = true; + updateTimer.Enabled = true; + } + + private void StopMonitoring() + { + isMonitoring = false; + updateTimer?.Stop(); + updateTimer?.Dispose(); + } + + private void UpdateData(object source, ElapsedEventArgs e) + { + if (liveChart == null) return; + + LiveData.RemoveAt(0); + LiveData.Add(new MetricData + { + Timestamp = DateTime.Now, + Value = random.Next(15, 95) + }); + InvokeAsync(StateHasChanged); + } + + public double CurrentValue => LiveData.LastOrDefault()?.Value ?? 0; + public double AverageValue => Math.Round(LiveData.Average(x => x.Value), 1); + public double PeakValue => LiveData.Max(x => x.Value); + + public class MetricData + { + public DateTime Timestamp { get; set; } + public double Value { get; set; } + } + + public void Dispose() + { + updateTimer?.Dispose(); + } +} +``` + +--- + +## 7. Interactive Report + +**Scenario:** Create interactive chart with drill-down and export capabilities. + +**When to use:** Business reports, executive dashboards, data exploration. + +**Key features:** Drill-down, export to PDF/Excel, print support, point click events. + +```razor +@page "/interactive-report" +@using Syncfusion.Blazor.Charts + +
+

Interactive Sales Report

+
+ + + + @if (isDrilledDown) + { + + } +
+ + + + + + + + + + + + + + + +
+ +@code { + private SfChart reportChart; + private bool isDrilledDown = false; + private string selectedCategory = ""; + + public string ChartTitle => isDrilledDown ? $"{selectedCategory} - Product Details" : "Sales by Category"; + public string XAxisTitle => isDrilledDown ? "Products" : "Categories"; + + public class SalesData + { + public string Category { get; set; } + public double Sales { get; set; } + } + + public List CategoryData = new List + { + new SalesData { Category = "Electronics", Sales = 245 }, + new SalesData { Category = "Clothing", Sales = 180 }, + new SalesData { Category = "Home & Garden", Sales = 165 }, + new SalesData { Category = "Sports", Sales = 140 } + }; + + public Dictionary> ProductData = new Dictionary> + { + ["Electronics"] = new List + { + new SalesData { Category = "Laptops", Sales = 95 }, + new SalesData { Category = "Phones", Sales = 85 }, + new SalesData { Category = "Tablets", Sales = 65 } + }, + ["Clothing"] = new List + { + new SalesData { Category = "Shirts", Sales = 75 }, + new SalesData { Category = "Pants", Sales = 55 }, + new SalesData { Category = "Shoes", Sales = 50 } + }, + ["Home & Garden"] = new List + { + new SalesData { Category = "Furniture", Sales = 90 }, + new SalesData { Category = "Decor", Sales = 45 }, + new SalesData { Category = "Garden Tools", Sales = 30 } + }, + ["Sports"] = new List + { + new SalesData { Category = "Fitness", Sales = 60 }, + new SalesData { Category = "Outdoor", Sales = 50 }, + new SalesData { Category = "Team Sports", Sales = 30 } + } + }; + + public List CurrentData => isDrilledDown ? ProductData[selectedCategory] : CategoryData; + + private void OnDrillDown(PointEventArgs args) + { + if (!isDrilledDown) + { + selectedCategory = args.X.ToString(); + isDrilledDown = true; + StateHasChanged(); + } + } + + private void DrillUp() + { + isDrilledDown = false; + selectedCategory = ""; + StateHasChanged(); + } + + private async Task ExportToPDF() + { + await reportChart.ExportAsync(ExportType.PDF, "SalesReport"); + } + + private async Task ExportToExcel() + { + await reportChart.ExportAsync(ExportType.CSV, "SalesReport"); + } + + private async Task PrintChart() + { + await reportChart.PrintAsync(); + } +} +``` + +--- + +## 8. Responsive Analytics + +**Scenario:** Mobile-friendly analytics dashboard with adaptive layout. + +**When to use:** Mobile apps, responsive web apps, cross-device dashboards. + +**Key features:** Adaptive layout, touch interactions, mobile optimization, responsive sizing. + +```razor +@page "/responsive-analytics" +@using Syncfusion.Blazor.Charts + +
+

Mobile-Responsive Analytics

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +@code { + public class AnalyticsData + { + public string Month { get; set; } + public double Visitors { get; set; } + } + + public class TrafficSource + { + public string Source { get; set; } + public double Percentage { get; set; } + } + + public class DeviceStats + { + public string Device { get; set; } + public double Users { get; set; } + } + + public List VisitorData = new List + { + new AnalyticsData { Month = "Jan", Visitors = 45 }, + new AnalyticsData { Month = "Feb", Visitors = 52 }, + new AnalyticsData { Month = "Mar", Visitors = 68 }, + new AnalyticsData { Month = "Apr", Visitors = 75 }, + new AnalyticsData { Month = "May", Visitors = 82 }, + new AnalyticsData { Month = "Jun", Visitors = 95 } + }; + + public List TrafficData = new List + { + new TrafficSource { Source = "Organic", Percentage = 45 }, + new TrafficSource { Source = "Direct", Percentage = 25 }, + new TrafficSource { Source = "Social", Percentage = 20 }, + new TrafficSource { Source = "Referral", Percentage = 10 } + }; + + public List DeviceData = new List + { + new DeviceStats { Device = "Desktop", Users = 125 }, + new DeviceStats { Device = "Mobile", Users = 185 }, + new DeviceStats { Device = "Tablet", Users = 65 } + }; +} +``` + +--- + +## Summary + +These practical examples demonstrate complete, production-ready implementations of Syncfusion Blazor Charts for common business scenarios. Each example includes: + +- **Complete razor page code** with all necessary imports +- **Data model classes** properly structured +- **Sample data** for immediate testing +- **Key features** fully configured +- **Real-world scenarios** for practical application + +Copy any example directly into your Blazor application and customize as needed. All examples are self-contained and require only the Syncfusion.Blazor.Charts package. diff --git a/skills/syncfusion-blazor-toolkit-charts/references/visual-elements.md b/skills/syncfusion-blazor-toolkit-charts/references/visual-elements.md new file mode 100644 index 0000000..1efd06a --- /dev/null +++ b/skills/syncfusion-blazor-toolkit-charts/references/visual-elements.md @@ -0,0 +1,565 @@ +# Visual Elements Reference + +## Table of Contents + +- [Data Markers](#data-markers) + - [Enabling Markers](#enabling-markers) + - [Marker Shapes](#marker-shapes) + - [Auto Marker Shapes](#auto-marker-shapes) + - [Marker Customization](#marker-customization) +- [Data Labels](#data-labels) + - [Basic Data Labels](#basic-data-labels) + - [Label Positioning](#label-positioning) + - [Label Formatting](#label-formatting) + - [Text Mapping](#text-mapping) + - [Label Templates](#label-templates) + - [Label Margins and Styling](#label-margins-and-styling) +- [Annotations](#annotations) + - [Adding Annotations](#adding-annotations) + - [Annotation Regions](#annotation-regions) + - [Coordinate Units](#coordinate-units) + - [Annotation Alignment](#annotation-alignment) +- [Gradients](#gradients) + - [Linear Gradients](#linear-gradients) + - [Radial Gradients](#radial-gradients) +- [Visual Styling Best Practices](#visual-styling-best-practices) + - [Marker Usage Guidelines](#marker-usage-guidelines) + - [Data Label Best Practices](#data-label-best-practices) + - [Annotation Guidelines](#annotation-guidelines) + - [Gradient Recommendations](#gradient-recommendations) + - [Performance Considerations](#performance-considerations) + + +## Data Markers + +Data markers are visual indicators placed on data points to make them more visible and distinguishable. + +### Enabling Markers + +Enable markers by setting `Visible="true"` in the `ChartMarker` component: + +```razor + + + + + + + + +@code { + public List ChartData = new List + { + new DataPoint { X = 2005, Y = 28 }, + new DataPoint { X = 2006, Y = 25 }, + new DataPoint { X = 2007, Y = 26 }, + new DataPoint { X = 2008, Y = 27 }, + new DataPoint { X = 2009, Y = 32 } + }; +} +``` + +### Marker Shapes + +Customize marker appearance using the `Shape` property: + +```razor + +``` + +**Available Shapes:** +- `Circle` - Default circular marker +- `Rectangle` - Square/rectangular marker +- `Triangle` - Triangular marker +- `Diamond` - Diamond-shaped marker +- `Pentagon` - Five-sided marker +- `InvertedTriangle` - Upside-down triangle +- `Image` - Custom image marker +- `Cross` - Cross/plus marker +- `HorizontalLine` - Horizontal line marker +- `VerticalLine` - Vertical line marker + +### Auto Marker Shapes + +When multiple series are present, set `Shape="ChartShape.Auto"` to automatically assign unique shapes to each series: + +```razor + + + + + + + + + + + + + +``` + +### Marker Customization + +Customize marker colors, borders, and opacity: + +```razor + + + +``` + +**Key Properties:** +- `Height`, `Width` - Size of the marker (in pixels) +- `Fill` - Fill color +- `Opacity` - Transparency (0 to 1) +- `IsFilled` - Whether marker is filled or hollow +- `ChartMarkerBorder` - Border styling + +--- + +## Data Labels + +Data labels display information about data points directly on the chart. + +### Basic Data Labels + +Enable data labels within the `ChartMarker` component: + +```razor + + + + + + + + + + + +@code { + public List SalesData = new List + { + new SalesInfo { Month = "Jan", Sales = 35 }, + new SalesInfo { Month = "Feb", Sales = 28 }, + new SalesInfo { Month = "Mar", Sales = 42 }, + new SalesInfo { Month = "Apr", Sales = 38 } + }; +} +``` + +### Label Positioning + +Control label placement using the `Position` property: + +```razor + +``` + +**Available Positions:** +- `Top` - Above the data point +- `Bottom` - Below the data point +- `Middle` - Center of the data point +- `Outer` - Outside the data point (for Column/Bar charts) +- `Auto` - Intelligent positioning to avoid overlap + +**Position by Chart Type:** + +```razor + + + + + + + +``` + +### Label Formatting + +Format data label values using the `Format` property: + +```razor + + + + + + + + + + + +``` + +**Format Specifiers:** +- `N0`, `N1`, `N2` - Number with 0, 1, 2 decimal places +- `C0`, `C1`, `C2` - Currency format +- `P0`, `P1`, `P2` - Percentage format +- `${point.x}`, `${point.y}` - Point value placeholders + +### Text Mapping + +Map custom text from data source to labels: + +```razor + + +@code { + public class ProductData + { + public string Product { get; set; } + public double Revenue { get; set; } + public string LabelText { get; set; } + } + + public List Products = new List + { + new ProductData { Product = "A", Revenue = 35, LabelText = "Product A: $35M" }, + new ProductData { Product = "B", Revenue = 28, LabelText = "Product B: $28M" }, + new ProductData { Product = "C", Revenue = 42, LabelText = "Product C: $42M" } + }; +} +``` + +### Label Templates + +Create custom label templates with HTML content: + +```razor + + + +``` + +**Template with Conditional Styling:** + +```razor + + + +``` + +### Label Margins and Styling + +Customize label appearance with margins, borders, and fonts: + +```razor + + + + + +``` + +**Complete Label Styling Example:** + +```razor + + + + + + + + + +``` + +--- + +## Annotations + +Annotations add text, shapes, or custom HTML content to highlight chart regions. + +### Adding Annotations + +Use the `ChartAnnotations` collection to add annotations: + +```razor + + + + + + +
Peak Sales
+ + + + + + + + +``` + +### Annotation Regions + +Control annotation positioning relative to chart or series using the `Region` property: + +```razor + + + +
Chart Center
+ + + + + + +
Series Annotation
+ + +``` + +**Region Types:** +- `Regions.Chart` - Position relative to entire chart (default) +- `Regions.Series` - Position relative to series area + +### Coordinate Units + +Specify annotation positioning units: + +```razor + + + +
Fixed at 250px, 150px
+ + + + + + +
At data point
+ + +``` + +### Annotation Alignment + +Control horizontal and vertical alignment: + +```razor + + +
+ Important Notice
+ This is a centered annotation +
+ + +``` + +**Alignment Options:** +- `Alignment.Near` - Left/Top alignment +- `Alignment.Center` - Center alignment +- `Alignment.Far` - Right/Bottom alignment + +**Multiple Annotations Example:** + +```razor + + + + +
▲ Peak
+ + + + + + +
▼ Low
+ + + + + + +
Q4 Performance
+ + + + +@code { + private DataPoint MaxPoint = new DataPoint { X = "Jun", Y = 92 }; + private DataPoint MinPoint = new DataPoint { X = "Feb", Y = 35 }; +} +``` + +--- + +## Gradients + +Apply gradient fills to chart series for enhanced visual appeal. + +### Linear Gradients + +Create linear gradient fills using SVG definitions: + +```razor + + + + + + + + + + + + + + + +``` + +**Horizontal Gradient:** + +```razor + + + + + + + + + + +``` + +**Multi-Color Gradient:** + +```razor + + + + + +``` + + + + + + + + + + + +``` + +**Per-Point Gradients:** + +```razor +@code { + public List GradientData = new List + { + new PointData { X = "A", Y = 35, Color = "url(#grad1)" }, + new PointData { X = "B", Y = 42, Color = "url(#grad2)" }, + new PointData { X = "C", Y = 28, Color = "url(#grad3)" } + }; +} + + + + + + + + + + + + + + + + + + + +``` + +--- + +## Visual Styling Best Practices + +### Marker Usage Guidelines + +1. **Use markers for line charts** with fewer than 20 data points +2. **Enable auto shapes** for multiple series to ensure differentiation +3. **Keep marker size proportional** to chart size (8-12px typical) +4. **Use filled markers** for better visibility against complex backgrounds + +### Data Label Best Practices + +1. **Avoid label overlap** by using intelligent positioning or rotating labels +2. **Format consistently** across all series (same decimal places, units) +3. **Use templates** for complex information display +4. **Position labels outside** for dense data sets + +### Annotation Guidelines + +1. **Limit annotations** to 3-5 important highlights per chart +2. **Use contrasting colors** to ensure annotations are visible +3. **Keep text concise** - use short, impactful phrases +4. **Position strategically** to avoid obscuring data + +### Gradient Recommendations + +1. **Use subtle gradients** - avoid harsh color transitions +2. **Maintain readability** - ensure sufficient contrast for data labels +3. **Be consistent** - use similar gradient styles across related charts +4. **Test accessibility** - ensure gradients work for colorblind users + +### Performance Considerations + +- **Limit visible markers** on large datasets (>100 points) +- **Use simple annotations** instead of complex HTML for better performance +- **Minimize gradient complexity** for charts with many series +- **Consider data label templates** only when standard formatting is insufficient