| name | syncfusion-aspnetcore-accumulation-chart |
| description | Implement Syncfusion ASP.NET Core Accumulation Charts for proportional data visualization. Use this when creating pie charts, doughnut charts, pyramid charts, or funnel charts in ASP.NET Core applications. This skill covers chart setup, data binding, legends, tooltips, data labels, grouping, and accessibility features. Suitable for visualizing market share, sales distribution, survey results, and other percentage-based data representations. |
| metadata | {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"} |
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
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
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
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
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
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
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
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
Install-Package Syncfusion.EJ2.AspNet.Core -Version <your_version_here>
2. Register Tag Helper (~/Pages/_ViewImports.cshtml)
@addTagHelper *, Syncfusion.EJ2
3. Add Scripts (~/Pages/Shared/_Layout.cshtml)
<head>
<script src="<!-- Add the appropriate Syncfusion CDN script link here -->"></script>
</head>
<body>
<ejs-scripts></ejs-scripts>
</body>
4. Create Pie Chart (~/Pages/Index.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)
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
<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
<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
<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
<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>
Use Case: Sales funnel visualization with image export.
API Reference
AccumulationChart Class
Represents the main accumulation chart component. All properties are defined in the Syncfusion.EJ2.Charts namespace.
Constructor
public AccumulationChart()
Core Properties
| Property | Type | Default | Description | API Reference |
|---|
Accessibility | AccumulationAccessibility | null | Options to improve accessibility for accumulation chart elements | AccumulationAccessibility |
Annotations | List<AccumulationAnnotationSettings> | null | Annotations for highlighting specific data points | AccumulationAnnotationSettings |
Background | string | null | Background color (hex or rgba) | - |
BackgroundImage | string | null | Background image URL | - |
Border | AccumulationChartBorder | null | Chart border configuration | AccumulationChartBorder |
Center | AccumulationChartCenter | null | Center position of pie/doughnut (x, y percentages) | AccumulationChartCenter |
CenterLabel | AccumulationChartCenterLabel | null | Center label configuration for doughnut charts | AccumulationChartCenterLabel |
DataSource | object | null | Chart data collection | - |
EnableAnimation | bool | true | Enable chart animation on load | - |
|
Event Properties
| Event | Type | Description |
|---|
AfterExport | string | Triggered after export completes |
AnimationComplete | string | Triggered after animation completes |
AnnotationRender | string | Triggered before annotation renders |
BeforeExport | string | Triggered before export starts |
BeforePrint | string | Triggered before print starts |
BeforeResize | string | Triggered before window resize |
ChartDoubleClick | string | Triggered on double-click |
ChartMouseClick | string | Triggered on mouse click |
ChartMouseDown | string | Triggered on mouse down |
ChartMouseLeave | string | Triggered when cursor leaves |
ChartMouseMove | string | Triggered on mouse move/hover |
ChartMouseUp | string | Triggered on mouse up |
LegendClick | string | Triggered after legend click |
LegendRender | string | Triggered before legend renders |
Load | string | Triggered before chart loads |
Loaded | string | Triggered after chart loads |
PointClick |
AccumulationSeries Class
Represents a data series in the accumulation chart.
Properties
| Property | Type | Default | Description | API Reference |
|---|
DataSource | object[] | null | Series data collection | - |
XName | string | null | Field name for X values (categories) | - |
YName | string | null | Field name for Y values (numeric data) | - |
Type | string | "Pie" | Series type: Pie, Pyramid, Funnel (Doughnut = Pie + innerRadius) | - |
Radius | string | "80%" | Chart radius (percentage or pixels) | - |
InnerRadius | string | "0%" | Inner radius for doughnut effect (percentage) | - |
StartAngle | double | 0 | Start angle in degrees (0-360) | - |
EndAngle | double | 360 | End angle in degrees (0-360) | - |
Explode | bool | false | Enable explosion on click | - |
ExplodeIndex | double | null | Index of pre-exploded point | - |
ExplodeOffset | string | "10%" | Distance exploded slice moves | - |
GroupTo | string | null | Grouping threshold (value or percentage) | - |
GroupMode | string | "Value" | Group mode: Value or Point |
AccumulationDataLabelSettings Class
Configures data labels displayed on data points.
Properties
| Property | Type | Default | Description |
|---|
Visible | bool | false | Show/hide data labels |
Position | string | "Outside" | Label position: Inside or Outside |
Name | string | null | Field name for label text |
Template | string | null | HTML template for labels |
Format | string | null | Number format (e.g., "p1", "n2", "c2") |
TextWrap | string | "Normal" | Text wrapping: Normal, Wrap, AnyWhere |
MaxWidth | double | null | Max label width (pixels) |
Font | object | null | Font configuration |
Border | object | null | Label border configuration |
ConnectorStyle | string | "Line" | Connector type: Line or Curve |
AccumulationChartLegendSettings Class
Configures the legend for the chart.
Properties
| Property | Type | Default | Description | API Reference |
|---|
Visible | bool | false | Show/hide legend | - |
Position | string | "Right" | Legend position: Top, Bottom, Left, Right | LegendPosition |
Alignment | string | "Center" | Legend alignment: Near, Center, Far | Alignment |
Width | string | "0" | Legend width (pixels or percentage) | - |
Height | string | "0" | Legend height (pixels or percentage) | - |
Reverse | bool | false | Reverse legend item order | - |
Layout | string | "Vertical" | Layout: Vertical or Horizontal | - |
MaximumColumns | double | null | Max columns in horizontal layout | - |
ShapeWidth | double | 15 | Legend shape width | - |
ShapeHeight | double | 15 | Legend shape height | - |
Title | object | null | Legend title configuration | - |
Template | string | null | Custom HTML template for legend | - |
TextWrap |
AccumulationChartTooltipSettings Class
Configures tooltips for the chart.
Properties
| Property | Type | Default | Description |
|---|
Enable | bool | false | Enable/disable tooltips |
Header | string | null | Custom tooltip header |
Format | string | null | Tooltip text format |
Template | string | null | HTML template for tooltips |
Fill | string | null | Tooltip background color |
Border | object | null | Tooltip border configuration |
TextStyle | object | null | Tooltip text styling |
Location | object | null | Fixed tooltip position (x, y) |
Opacity | double | 1 | Tooltip opacity |
Shared | bool | false | Show shared tooltip |
Available Enumerations
| Enum | Values | Description |
|---|
AccumulationTheme | Fabric, FabricDark, Bootstrap4, Bootstrap, BootstrapDark, HighContrastLight, HighContrast, Tailwind, TailwindDark, Bootstrap5, Bootstrap5Dark, Fluent, FluentDark, Fluent2, Fluent2Dark, Fluent2HighContrast, Material3, Material3Dark, Material, MaterialDark | Chart theme options |
AccumulationHighlightMode | None, Point | Highlight behavior |
AccumulationSelectionMode | None, Point | Selection behavior |
SelectionPattern | None, Chessboard, Dots, DiagonalForward, Crosshatch, Pacman, DiagonalBackward, Grid, Turquoise, Star, Triangle, Circle, Tile, HorizontalDash, VerticalDash, Rectangle, Box, VerticalStripe, HorizontalStripe, Bubble | Pattern options for highlighting/selection |
LegendShape | Circle, Rectangle, Triangle, Diamond, Cross, HorizontalLine, VerticalLine, Pentagon, InvertedTriangle, SeriesType | Legend icon shapes |
Related Classes
Key Properties
AccumulationChart Properties
| Property | Type | Description | Example |
|---|
enableSmartLabels | boolean | Auto-arrange labels to prevent overlap | true |
center | object | Position of chart center (x, y percentages) | {x: "50%", y: "50%"} |
legendSettings | object | Legend configuration (position, alignment) | {visible: true, position: 'Right'} |
tooltipSettings | object | Tooltip configuration and templates | {enable: true, format: '${point.x}: ${point.y}'} |
title | string | Chart title text | "Browser Market Share" |
height | string | Chart height | "450px" |
width | string | Chart width | "100%" |
theme | string | Visual theme | "Material" |
background | string | Background color | "#ffffff" |
AccumulationSeries Properties
| Property | Type | Description | Example |
|---|
type | string | Chart type: Pie, Pyramid, Funnel (Doughnut = Pie + innerRadius) | "Pie" |
dataSource | object[] | Data collection | @chartData |
xName | string | Field for category labels | "xValue" |
yName | string | Field for values | "yValue" |
radius | string | Chart radius (percentage or pixel) | "80%" |
innerRadius | string | Inner radius for doughnut (percentage) | "40%" |
startAngle | number | Start angle in degrees | 0 |
endAngle | number | End angle in degrees | 360 |
explode | boolean | Enable slice explosion on click | true |
explodeIndex | number | Index of pre-exploded slice | 2 |
explodeOffset | string | Explode distance | "10%" |
groupTo | string | Threshold for grouping | "11" |
groupMode | string | Group by: Point, Value | "Value" |
DataLabel Properties
| Property | Type | Description | Example |
|---|
visible | boolean | Show/hide data labels | true |
position | string | Inside or Outside | "Outside" |
name | string | Field name for label text | "text" |
template | string | Custom HTML template | "<div>${point.x}: ${point.y}%</div>" |
connectorStyle | string | Line or Curve | "Curve" |
font | object | Font customization | {size: '12px', color: '#000'} |
Common Use Cases
1. Market Share Analysis
Display product/service market distribution with pie charts showing competitor percentages.
2. Budget Allocation
Visualize department spending or resource allocation with doughnut charts and center totals.
3. Survey Results
Present poll or survey responses with grouped categories for small values.
4. Sales Funnel Tracking
Monitor conversion stages from leads to customers using funnel charts.
5. Organizational Hierarchy
Display team size distribution or role distribution with pyramid charts.
6. Mobile Dashboards
Create responsive data visualizations optimized for touch interactions and small screens.
7. Report Generation
Export charts as images or PDFs for automated reporting systems.
8. Real-Time Monitoring
Update charts dynamically to show live statistics (server status, user activity).
Related Components
- Chart: For line, bar, column, area, and other Cartesian charts
- RangeNavigator: For timeline-based data exploration
- StockChart: For financial data visualization
- TreeMap: For hierarchical data with rectangles
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
Additional Resources
Next Steps:
- Read getting-started.md for detailed installation
- Explore chart-types.md for type-specific features
- Review data-visualization.md for styling
- Check accessibility.md for compliance requirements
