syncfusion-aspnetcore-accumulation-chart

# Implementing Syncfusion ASP.NET Core Accumulation Charts A comprehensive skill for implementing Syncfusion's ASP.NET Core Accumulation Chart component. This component renders circular data visualizations including Pie, Doughnut, Pyramid, and Funnel charts using Scalable Vector Graphics (SVG). ## 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 and Variants](#chart-types-and-variants) - [Data Visualization Features](#data-visualization-features) - [Data Handling](#data-handling) - [Advanced Features](#advanced-features) - [Accessibility](#accessibility) - [Quick Start Example](#quick-start-example) - [1. Install Package](#1-install-package) - [2. Register Tag Helper (~/Pages/_ViewImports.cshtml)](#2-register-tag-helper-pagesviewimportscshtml) - [3. Add Scripts (~/Pages/Shared/_Layout.cshtml)](#3-add-scripts-pagessharedlayoutcshtml) - [4. Create Pie Chart (~/Pages/Index.cshtml)](#4-create-pie-chart-pagesindexcshtml) - [5. Define Data Model (~/Pages/Index.cshtml.cs or separate class)](#5-define-data-model-pagesindexcshtmlcs-or-separate-class) - [Common Patterns](#common-patterns) - [Pattern 1: Doughnut Chart with Center Label](#pattern-1-doughnut-chart-with-center-label) - [Pattern 2: Pie Chart with Smart Labels and Tooltips](#pattern-2-pie-chart-with-smart-labels-and-tooltips) - [Pattern 3: Grouped Data with Small Values](#pattern-3-grouped-data-with-small-values) - [Pattern 4: Funnel Chart with Export](#pattern-4-funnel-chart-with-export) - [API Reference](#api-reference) - [AccumulationChart Class](#accumulationchart-class) - [AccumulationSeries Class](#accumulationseries-class) - [AccumulationDataLabelSettings Class](#accumulationdatalabelsettings-class) - [AccumulationChartLegendSettings Class](#accumulationchartlegendsettings-class) - [AccumulationChartTooltipSettings Class](#accumulationcharttooltipsettings-class) - [Available Enumerations](#available-enumerations) - [Related Classes](#related-classes) - [Key Properties](#key-properties) - [AccumulationChart Properties](#accumulationchart-properties) - [AccumulationSeries Properties](#accumulationseries-properties) - [DataLabel Properties](#datalabel-properties) - [Common Use Cases](#common-use-cases) - [1. Market Share Analysis](#1-market-share-analysis) - [2. Budget Allocation](#2-budget-allocation) - [3. Survey Results](#3-survey-results) - [4. Sales Funnel Tracking](#4-sales-funnel-tracking) - [5. Organizational Hierarchy](#5-organizational-hierarchy) - [6. Mobile Dashboards](#6-mobile-dashboards) - [7. Report Generation](#7-report-generation) - [8. Real-Time Monitoring](#8-real-time-monitoring) - [Related Components](#related-components) - [Browser Support](#browser-support) - [Additional Resources](#additional-resources) ## When to Use This Skill Use this skill when you need to: - Create pie, doughnut, pyramid, or funnel charts in ASP.NET Core applications - Visualize proportional data or percentage distributions - Display hierarchical data with pyramid/funnel charts - Add data labels, tooltips, and legends to accumulation charts - Implement interactive features (exploding slices, selection, drill-down) - Handle grouped data or empty points in charts - Export or print accumulation charts - Make charts accessible (WCAG 2.2 compliant) - Dynamically update chart data in real-time - Customize chart appearance with themes, colors, and gradients ## Component Overview **AccumulationChart** is a circular graphics component that divides data into segments to illustrate numerical proportions. It supports: - **Chart Types:** Pie (including Doughnut variant), Pyramid, Funnel - **Note:** Doughnut is achieved by setting `innerRadius` on a Pie chart, not a separate type - **Smart Labels:** Automatic label positioning to prevent overlapping - **Grouping:** Combine small data points based on value or count - **Semi-Charts:** Customize start and end angles for semi-pie/doughnut - **Legend:** Display additional point information - **Tooltips:** Interactive data point details - **Empty Points:** Graceful handling of missing data - **Accessibility:** Full WCAG 2.2 Level A & AA compliance - **Export:** PNG, JPEG, SVG, PDF formats - **Print:** Direct browser printing support ## Documentation and Navigation Guide ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) **When to read:** Setting up accumulation charts for the first time, or need complete installation and basic implementation guidance. **What you'll learn:** - Prerequisites and system requirements - Installing Syncfusion NuGet packages - Registering tag helpers and script resources - Creating your first pie/doughnut chart - Basic data binding (dataSource, xName, yName) - CSS theme imports and script manager setup - Running and testing the chart - Complete minimal working example ### Chart Types and Variants 📄 **Read:** [references/chart-types.md](references/chart-types.md) **When to read:** Need to implement specific chart types (Pie, Doughnut, Pyramid, Funnel) or customize chart geometry and appearance. **What you'll learn:** - Pie chart implementation and configuration - Doughnut chart with inner radius and center labels - Pyramid chart with width, gap, and neck customization - Funnel chart with neck dimensions - Radius customization for all chart types - Start and end angles for semi-pie/semi-doughnut - Exploding slices (single and multiple points) - Chart center positioning - Complete code examples for each type ### Data Visualization Features 📄 **Read:** [references/data-visualization.md](references/data-visualization.md) **When to read:** Enhancing charts with data labels, tooltips, legends, colors, or custom styling. **What you'll learn:** - Data label visibility, positioning, and templates - Smart labels for overlap prevention - Connector lines for outside labels - Tooltip configuration and templates - Legend positioning, alignment, and customization - Title and subtitle configuration - Point colors and gradient fills - Text mapping from data source - Border and margin customization - Complete styling patterns ### Data Handling 📄 **Read:** [references/data-handling.md](references/data-handling.md) **When to read:** Working with complex data scenarios like grouping small values, handling missing data, or updating charts dynamically. **What you'll learn:** - Grouping points by value or count threshold - Group settings (threshold, mode, color, name) - Empty points handling (null/undefined values) - Empty point modes (Zero, Drop, Average, Gap) - Dynamic data updates and live scenarios - Data source binding patterns - Sorting and ordering data - Edge cases and troubleshooting ### Advanced Features 📄 **Read:** [references/advanced-features.md](references/advanced-features.md) **When to read:** Implementing annotations, export/print functionality, or migrating from EJ1 to EJ2. **What you'll learn:** - Chart annotations (text, shapes, images) - Annotation positioning (coordinate, region, alignment) - Export to image formats (PNG, JPEG, SVG) - Export to PDF - Print functionality and customization - EJ1 to EJ2 API migration guide - Performance optimization tips - Complex implementation patterns ### Accessibility 📄 **Read:** [references/accessibility.md](references/accessibility.md) **When to read:** Making charts accessible for users with disabilities or ensuring WCAG 2.2 compliance. **What you'll learn:** - WCAG 2.2 Level A & AA compliance features - Keyboard navigation (Tab, arrow keys, Enter) - ARIA attributes and roles - Screen reader support and announcements - High contrast theme support - Focus indicators and visual feedback - Color contrast requirements - Accessible color palettes - Testing with assistive technologies - Complete accessible chart implementation ## Quick Start Example Here's a minimal example to render a pie chart in ASP.NET Core: ### 1. Install Package ```bash Install-Package Syncfusion.EJ2.AspNet.Core -Version <your_version_here> ``` ### 2. Register Tag Helper (~/Pages/_ViewImports.cshtml) ```csharp @addTagHelper *, Syncfusion.EJ2 ``` ### 3. Add Scripts (~/Pages/Shared/_Layout.cshtml) ```html <head> <!-- Syncfusion JS --> <script src="<!-- Add the appropriate Syncfusion CDN script link here -->"></script> </head> <body> <!-- Content --> <ejs-scripts></ejs-scripts> </body> ``` ### 4. Create Pie Chart (~/Pages/Index.cshtml) ```cshtml @{ List<PieChartData> chartData = new List<PieChartData> { new PieChartData { xValue = "Chrome", yValue = 37 }, new PieChartData { xValue = "Firefox", yValue = 22 }, new PieChartData { xValue = "Safari", yValue = 19 }, new PieChartData { xValue = "Edge", yValue = 12 }, new PieChartData { xValue = "Others", yValue = 10 } }; } <ejs-accumulationchart id="pieChart" enableSmartLabels="true" title="Browser Market Share" subTitle="Pie chart showing browser usage distribution"> <e-accumulation-series-collection> <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue" name="Browsers"> <e-accumulationseries-datalabel visible="true" position="Outside" name="text" format="p0"> <e-connectorstyle type="Curve" length="20"></e-connectorstyle> <e-font fontWeight="600"></e-font> </e-accumulationseries-datalabel> </e-accumulation-series> </e-accumulation-series-collection> <e-accumulationchart-legendsettings position="Bottom" alignment="Center" toggleVisibility="true"> </e-accumulationchart-legendsettings> <e-accumulationchart-tooltipsettings enable="true" format="${point.x}: <b>${point.y}%</b>" header="Browser"> </e-accumulationchart-tooltipsettings> </ejs-accumulationchart> ``` **Key Points:** - `title` and `subTitle` are **direct attributes** on `<ejs-accumulationchart>`, NOT child tags - `<e-font>` is the correct child tag inside `<e-accumulationseries-datalabel>`, NOT `<e-datalabelfont>` - Use `format="p0"` for percentage without decimals ### 5. Define Data Model (~/Pages/Index.cshtml.cs or separate class) ```csharp public class PieChartData { public string xValue { get; set; } public double yValue { get; set; } } ``` **Result:** A basic pie chart displaying browser usage statistics. ## Common Patterns ### Pattern 1: Doughnut/Donut Chart with Center Label ```cshtml <ejs-accumulationchart id="container"> <e-accumulation-series-collection> <e-accumulation-series dataSource="chartData" xName="x" yName="y" innerRadius="65%"> <!-- innerRadius goes on series, NOT on chart --> </e-accumulation-series> </e-accumulation-series-collection> <e-accumulationchart-centerlabel text="Mobile<br>Browsers<br>Statistics"> </e-accumulationchart-centerlabel> <e-accumulationchart-legendsettings visible="false"> </e-accumulationchart-legendsettings> </ejs-accumulationchart> ``` **Use Case:** Dashboard KPIs with center text showing total value. ### Pattern 2: Pie Chart with Smart Labels and Tooltips ```cshtml <ejs-accumulationchart id="smartLabelChart" enableSmartLabels="true" title="Market Share" subTitle="Distribution by browser"> <e-accumulation-series-collection> <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue"> <e-accumulationseries-datalabel visible="true" position="Outside" name="text" format="p0"> <e-connectorstyle type="Curve" length="20"></e-connectorstyle> <e-font fontWeight="600"></e-font> </e-accumulationseries-datalabel> </e-accumulation-series> </e-accumulation-series-collection> <e-accumulationchart-legendsettings position="Bottom" alignment="Center" toggleVisibility="true"> </e-accumulationchart-legendsettings> <e-accumulationchart-tooltipsettings enable="true" format="${point.x}: <b>${point.y}%</b>" header="Browser"> </e-accumulationchart-tooltipsettings> </ejs-accumulationchart> ``` **Use Case:** Preventing label overlap in charts with many small slices. ### Pattern 3: Grouped Data with Small Values ```cshtml <ejs-accumulationchart id="groupedChart"> <e-accumulation-series-collection> <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue" groupTo="11"> </e-accumulation-series> </e-accumulation-series-collection> </ejs-accumulationchart> ``` **Use Case:** Combining values below 11% into a single "Others" group. ### Pattern 4: Funnel Chart with Export ```cshtml <button id="exportBtn">Export as PNG</button> <ejs-accumulationchart id="funnelChart"> <e-accumulation-series-collection> <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue" type="Funnel" neckWidth="15%" neckHeight="18%"> </e-accumulation-series> </e-accumulation-series-collection> </ejs-accumulationchart> <script> document.getElementById('exportBtn').onclick = function() { var chart = document.getElementById('funnelChart').ej2_instances[0]; chart.export('PNG', 'funnel-chart'); }; </script>