syncfusion-aspnetcore-charts

# Implementing Syncfusion ASP.NET Core Charts The Syncfusion ASP.NET Core Chart component is a feature-rich data visualization control that supports 25+ interactive chart types. It provides extensive customization options, multiple axes, data binding capabilities, and interactive features like zooming, panning, crosshair, and tooltips. ## Table of Contents - [When to Use This Skill](#when-to-use-this-skill) - [Component Overview](#component-overview) - [Documentation and Navigation Guide](#documentation-and-navigation-guide) - [Getting Started](#getting-started) - [Chart Types](#chart-types) - [Data Binding](#data-binding) - [Axes Configuration](#axes-configuration) - [Series Configuration](#series-configuration) - [Visual Elements](#visual-elements) - [Interactivity Features](#interactivity-features) - [Advanced Features](#advanced-features) - [Appearance and Theming](#appearance-and-theming) - [Accessibility and Localization](#accessibility-and-localization) - [Quick Start Example](#quick-start-example) - [Common Patterns](#common-patterns) - [Multiple Series Chart](#multiple-series-chart) - [Chart with Data Labels and Markers](#chart-with-data-labels-and-markers) - [Combination Chart](#combination-chart) - [Chart with Zooming and Crosshair](#chart-with-zooming-and-crosshair) - [Key Configuration Options](#key-configuration-options) - [Chart-Level Properties](#chart-level-properties) - [Primary Axis (e-chart-primaryxaxis)](#primary-axis-e-chart-primaryxaxis) - [Series Properties (e-series)](#series-properties-e-series) - [Interactive Features](#interactive-features) - [Visual Elements Options](#visual-elements-options) - [Common Use Cases](#common-use-cases) - [1. Sales Dashboard](#1-sales-dashboard) - [2. Financial Analysis](#2-financial-analysis) - [3. Trend Analysis](#3-trend-analysis) - [4. Statistical Distribution](#4-statistical-distribution) - [5. Performance Monitoring](#5-performance-monitoring) - [6. Comparison Analysis](#6-comparison-analysis) - [Troubleshooting Tips](#troubleshooting-tips) - [Related Components](#related-components) - [API Reference](#api-reference) - [Additional Resources](#additional-resources) ## When to Use This Skill Use this skill when you need to: - Create any type of chart or graph in ASP.NET Core applications - Visualize data with line, area, column, bar, or other chart types - Display financial data with candlestick, OHLC, or technical indicators - Implement interactive charts with zoom, pan, crosshair, or selection - Create multi-series charts or combination charts - Add data labels, markers, legends, or annotations to charts - Configure axes (numeric, datetime, category, logarithmic) - Export charts to PDF, SVG, or image formats - Build dashboards with multiple chart components - Implement accessible charts with WCAG compliance ## Component Overview **Key Capabilities:** - **25+ Chart Types:** Line, Area, Column, Bar, Scatter, Bubble, Candle, OHLC, and more - **Data Binding:** JSON arrays, DataManager, OData services, dynamic updates - **Multiple Axes:** Support for multiple X and Y axes with different scales - **Interactivity:** Zooming, panning, crosshair, trackball, selection, tooltips - **Customization:** Themes, colors, gradients, custom templates - **Advanced Features:** Annotations, striplines, trendlines, technical indicators, error bars - **Export:** PDF, SVG, PNG, JPEG, CSV formats - **Accessibility:** WCAG 2.0 compliant, keyboard navigation, RTL support ## Documentation and Navigation Guide ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) - Installation and NuGet package setup - Adding Chart tag helper to ASP.NET Core project - Script manager registration - Creating your first chart - Basic configuration and running the application ### Chart Types 📄 **Read:** [references/line-area-charts.md](references/line-area-charts.md) - Line, Step Line, Spline charts - Area, Step Area, Spline Area charts - Stacked Area and 100% Stacked Area - Range Area and Spline Range Area - When to use each type and complete examples 📄 **Read:** [references/column-bar-charts.md](references/column-bar-charts.md) - Column and Bar charts - Stacked Column/Bar and 100% Stacked - Range Column charts - Vertical chart orientation - Complete configuration examples 📄 **Read:** [references/financial-charts.md](references/financial-charts.md) - Candlestick charts - OHLC (Open-High-Low-Close) charts - HiLo and HiLoOpenClose charts - Technical indicators (SMA, EMA, RSI, MACD, etc.) - Financial data binding patterns 📄 **Read:** [references/scatter-bubble-charts.md](references/scatter-bubble-charts.md) - Scatter plots for correlation analysis - Bubble charts with three dimensions - Point customization and sizing - Complete implementation examples 📄 **Read:** [references/specialized-charts.md](references/specialized-charts.md) - Box and Whisker (statistical distribution) - Histogram (frequency distribution) - Pareto (cumulative analysis) - Waterfall (sequential value changes) - Polar and Radar charts - Complete examples for each type ### Data Binding 📄 **Read:** [references/data-binding.md](references/data-binding.md) - Binding to JSON object arrays - DataManager integration - OData web services - Complex property binding - Dynamic data updates - Local vs remote data ### Axes Configuration 📄 **Read:** [references/axes-configuration.md](references/axes-configuration.md) - Axis types: Numeric, DateTime, Category, Logarithmic - Multiple axes configuration - Axis crossing and positioning - Inversed axis - Axis title and styling - Range and interval customization 📄 **Read:** [references/axis-labels.md](references/axis-labels.md) - Smart label management (trim, wrap, rotate, hide) - Multilevel labels for grouping - Label formatting and templates - Custom label placement - Edge label handling - Label rotation and alignment ### Series Configuration 📄 **Read:** [references/series-configuration.md](references/series-configuration.md) - Adding multiple series - Series types and properties - Combination charts (mixing chart types) - Empty points handling - Series customization - Performance optimization ### Visual Elements 📄 **Read:** [references/data-labels.md](references/data-labels.md) - Enabling and positioning data labels - Label templates and formatting - Text mapping from data source - Smart label arrangement - Customization (font, color, border) - Label connectors 📄 **Read:** [references/markers-and-legends.md](references/markers-and-legends.md) - Data marker shapes and customization - Marker visibility and sizing - Legend positioning and layout - Legend customization and templates - Legend pagination - Toggle series visibility ### Interactivity Features 📄 **Read:** [references/zooming-panning.md](references/zooming-panning.md) - Zooming modes: Selection, Pinch, Mousewheel - Panning support - Zoom toolbar configuration - Reset zoom functionality - Programmatic zoom control 📄 **Read:** [references/crosshair-trackball.md](references/crosshair-trackball.md) - Crosshair configuration and customization - Trackball mode for multiple series - Tooltip integration - Line styles and labels - Shared tooltips 📄 **Read:** [references/tooltips.md](references/tooltips.md) - Enabling and customizing tooltips - Tooltip templates - Shared tooltips across series - Format and styling - Tooltip animations 📄 **Read:** [references/selection.md](references/selection.md) - Point and series selection - Selection modes and patterns - Multiple selection - Selection events - Visual feedback customization ### Advanced Features 📄 **Read:** [references/annotations-striplines.md](references/annotations-striplines.md) - Chart annotations (text, shapes, images) - Annotation positioning and alignment - Strip lines for highlighting regions - Segment and recurrence patterns - Customization and styling 📄 **Read:** [references/trendlines-error-bars.md](references/trendlines-error-bars.md) - Trendline types: Linear, Exponential, Logarithmic, Polynomial - Forecasting with trendlines - Error bars for uncertainty - Error bar modes and types - Customization options 📄 **Read:** [references/multiple-panes.md](references/multiple-panes.md) - Creating multiple chart panes - Pane configuration and sizing - Associating series with panes - Synchronized axes - Layout customization ### Appearance and Theming 📄 **Read:** [references/appearance-customization.md](references/appearance-customization.md) - Built-in themes (Material, Bootstrap, Fabric, etc.) - Chart dimensions and sizing - Background and border customization - Gradient colors and fills - Chart title and subtitle - Print and export support ### Accessibility and Localization 📄 **Read:** [references/accessibility-localization.md](references/accessibility-localization.md) - WCAG 2.0 compliance - Keyboard navigation - Screen reader support - RTL (Right-to-Left) support - Internationalization (i18n) - Localization of chart elements ## Quick Start Example Here's a minimal example to create a basic line chart: ```cshtml @* Add to your .cshtml page *@ <ejs-chart id="container" title="Sales Analysis"> <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis> <e-series-collection> <e-series dataSource="@ViewBag.ChartData" xName="Month" yName="Sales" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"> </e-series> </e-series-collection> </ejs-chart> ``` ```csharp // In your controller public IActionResult Index() { ViewBag.ChartData = new object[] { new { Month = "Jan", Sales = 35 }, new { Month = "Feb", Sales = 28 }, new { Month = "Mar", Sales = 34 }, new { Month = "Apr", Sales = 32 }, new { Month = "May", Sales = 40 } }; return View(); } ``` ## Common Patterns ### Multiple Series Chart ```cshtml <ejs-chart id="container" title="Product Comparison"> <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis> <e-series-collection> <e-series dataSource="@ViewBag.ProductA" xName="Month" yName="Sales" name="Product A" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"> </e-series> <e-series dataSource="@ViewBag.ProductB" xName="Month" yName="Sales" name="Product B" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"> </e-series> </e-series-collection> <e-chart-legendsettings visible="true"></e-chart-legendsettings> </ejs-chart> ``` ### Chart with Data Labels and Markers ```cshtml <ejs-chart id="container"> <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis> <e-series-collection> <e-series dataSource="@ViewBag.Data" xName="X" yName="Y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"> <e-series-marker visible="true" height="10" width="10"> <e-series-datalabel visible="true" position="Top"> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart> ``` ### Combination Chart ```cshtml <ejs-chart id="container" title="Weather Analysis"> <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart-primaryxaxis> <e-series-collection> <e-series dataSource="@ViewBag.Data" xName="Month" yName="Temperature" name="Temperature" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"> </e-series> <e-series dataSource="@ViewBag.Data" xName="Month" yName="Rainfall" name="Rainfall" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"> </e-series> </e-series-collection> </ejs-chart> ``` ### Chart with Zooming and Crosshair ```cshtml <ejs-chart id="container"> <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime" ></e-chart-primaryxaxis> <e-chart-zoomsettings enableSelectionZooming="true" enablePinchZooming="true"> </e-chart-zoomsettings> <e-chart-crosshairsettings enable="true"> </e-chart-crosshairsettings> <e-series-collection> <e-series dataSource="@ViewBag.Data" xName="Date" yName="Value" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area"> </e-series> </e-series-collection> </ejs-chart> ``` ## Key Configuration Options ### Chart-Level Properties - `title`: Chart title text - `width`/`height`: Chart dimensions - `theme`: Visual theme (Material, Bootstrap, Fabric, etc.) - `background`: Background color - `palettes`: Custom color palette for series ### Primary Axis (`e-chart-primaryxaxis`) - `valueType`: Category, Numeric, DateTime, Logarithmic - `title`: Axis title - `minimum`/`maximum`: Axis range - `interval`: Label interval - `labelFormat`: Format string for labels ### Series Properties (`e-series`) - `type`: Chart type (Line, Column, Bar, Area, etc.) - `dataSource`: Data to visualize - `xName`/`yName`: Property names for X and Y values