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).

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

bash

Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }}

2. Register Tag Helper (~/Pages/_ViewImports.cshtml)

csharp

@addTagHelper *, Syncfusion.EJ2

3. Add Scripts (~/Pages/Shared/_Layout.cshtml)

html

<head>
    <!-- Syncfusion CSS -->
    <link href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/material.css" rel="stylesheet" />
    <!-- Syncfusion JS -->
    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></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">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue">
        </e-accumulation-series>
    </e-accumulation-series-collection>
</ejs-accumulationchart>

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 Chart with Center Label

cshtml

<ejs-accumulationchart id="container">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="chartData" xName="x" yName="y" innerRadius="65%">
        </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">
    <e-accumulation-series-collection>
        <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue">
            <e-accumulationseries-datalabel visible="true" 
                                          position="Outside" 
                                          name="text">
                <e-connectorstyle type="Curve"></e-connectorstyle>
            </e-accumulationseries-datalabel>
        </e-accumulation-series>
    </e-accumulation-series-collection>
    <e-accumulationchart-tooltipsettings enable="true" format="${point.x}: ${point.y}%">
    </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>

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

csharp

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	-
`EnableBorderOnMouseMove`	`bool`	true	Enable border on mouse hover	-
`EnableExport`	`bool`	true	Enable export to JPEG, PNG, SVG, PDF, XLSX, CSV	-
`EnableHtmlSanitizer`	`bool`	false	Sanitize untrusted HTML in chart content	-
`EnablePersistence`	`bool`	false	Persist component state across page reloads	-
`EnableRtl`	`bool`	false	Enable right-to-left rendering	-
`EnableSmartLabels`	`bool`	true	Auto-arrange labels to prevent overlap	-
`FocusBorderColor`	`string`	-	Focus border color for accessibility	-
`FocusBorderMargin`	`double`	0	Focus border margin	-
`FocusBorderWidth`	`double`	1.5	Focus border width	-
`Height`	`string`	null	Chart height (e.g., "450px", "100%")	-
`HighlightColor`	`string`	""	Color for highlighting data points on hover	-
`HighlightMode`	`AccumulationHighlightMode`	None	Highlight mode: None or Point	AccumulationHighlightMode
`HighlightPattern`	`SelectionPattern`	None	Pattern for highlighting series/points	SelectionPattern
`IsMultiSelect`	`bool`	false	Enable multiple point selection (requires selectionMode=Point)	-
`LegendSettings`	`AccumulationChartLegendSettings`	null	Legend configuration	AccumulationChartLegendSettings
`Locale`	`string`	""	Culture/localization override (default: en-US)	-
`Margin`	`AccumulationChartMargin`	null	Chart margins (left, right, top, bottom)	AccumulationChartMargin
`NoDataTemplate`	`object`	null	Template for empty chart state	-
`SelectedDataIndexes`	`object`	null	Initial selected point indexes	-
`SelectionMode`	`AccumulationSelectionMode`	None	Selection mode: None or Point	AccumulationSelectionMode
`SelectionPattern`	`SelectionPattern`	None	Pattern for selected series/points	SelectionPattern
`Series`	`List<AccumulationSeries>`	null	Chart series collection	AccumulationSeries
`SubTitle`	`string`	null	Chart subtitle text	-
`SubTitleStyle`	`AccumulationChartSubTitleStyle`	null	Subtitle font and styling	AccumulationChartSubTitleStyle
`Theme`	`AccumulationTheme`	Material	Visual theme	AccumulationTheme
`Title`	`string`	null	Chart title text	-
`TitleStyle`	`AccumulationChartTitleStyleSettings`	null	Title font and styling	AccumulationChartTitleStyleSettings
`Tooltip`	`AccumulationChartTooltipSettings`	null	Tooltip configuration	AccumulationChartTooltipSettings
`UseGroupingSeparator`	`bool`	false	Use thousand separator for numbers	-
`Width`	`string`	null	Chart width (e.g., "100px", "100%")	-

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`	`string`	Triggered when point is clicked
`PointMove`	`string`	Triggered when point is hovered
`PointRender`	`string`	Triggered before point renders
`Resized`	`string`	Triggered after window resize completes
`SelectionComplete`	`string`	Triggered after selection completes
`SeriesRender`	`string`	Triggered before series renders
`TextRender`	`string`	Triggered before data label renders
`TooltipRender`	`string`	Triggered before tooltip renders

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	-
`GroupName`	`string`	"Others"	Name for grouped points	-
`PyramidMode`	`string`	"Linear"	Pyramid mode: Linear or Surface	-
`FunnelMode`	`string`	"Standard"	Funnel mode: Standard or Trapezoidal	-
`NeckWidth`	`string`	"20%"	Funnel neck width (percentage)	-
`NeckHeight`	`string`	"20%"	Funnel neck height (percentage)	-
`Width`	`string`	"80%"	Pyramid/Funnel width (percentage)	-
`Height`	`string`	"80%"	Pyramid/Funnel height (percentage)	-
`GapRatio`	`double`	0	Gap between pyramid/funnel segments	-
`Palettes`	`string[]`	null	Custom color palette	-
`PointColorMapping`	`string`	null	Field name for point colors	-
`PointRender`	`string`	null	Event triggered before point renders	-
`DataLabel`	`AccumulationDataLabelSettings`	null	Data label configuration	AccumulationDataLabelSettings
`EmptyPointSettings`	`AccumulationChartEmptyPointSettings`	null	Empty point handling	AccumulationChartEmptyPointSettings
`ConnectorStyle`	`AccumulationChartConnector`	null	Connector line styling	AccumulationChartConnector
`Border`	`AccumulationChartBorder`	null	Series border styling	AccumulationChartBorder
`LegendShape`	`LegendShape`	SeriesType	Legend icon shape	LegendShape
`TooltipMappingName`	`string`	null	Field for custom tooltip content	-

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`	`string`	"Normal"	Text wrapping: Normal or Wrap	-
`MaximumLabelWidth`	`double`	null	Max legend item label width	-
`EnablePages`	`bool`	false	Enable paging for large legends	-
`ToggleVisibility`	`bool`	true	Toggle point visibility on legend click	-

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

Class	Namespace	Description	API Reference
`AccumulationChartBorder`	Syncfusion.EJ2.Charts	Border configuration	AccumulationChartBorder
`AccumulationChartCenter`	Syncfusion.EJ2.Charts	Center position	AccumulationChartCenter
`AccumulationChartMargin`	Syncfusion.EJ2.Charts	Margin configuration	AccumulationChartMargin
`AccumulationChartConnector`	Syncfusion.EJ2.Charts	Connector line styling	AccumulationChartConnector
`AccumulationChartEmptyPointSettings`	Syncfusion.EJ2.Charts	Empty point handling	AccumulationChartEmptyPointSettings
`AccumulationAnnotationSettings`	Syncfusion.EJ2.Charts	Annotation configuration	AccumulationAnnotationSettings
`AccumulationAccessibility`	Syncfusion.EJ2.Charts	Accessibility options	AccumulationAccessibility

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

syncfusion-aspnetcore-accumulation-chart

NPX Install

Tags

SKILL.md Content

Implementing Syncfusion ASP.NET Core Accumulation Charts

When to Use This Skill

Component Overview

Documentation and Navigation Guide

Getting Started

Chart Types and Variants

Data Visualization Features

Data Handling

Advanced Features

Accessibility

Quick Start Example

1. Install Package

2. Register Tag Helper (~/Pages/_ViewImports.cshtml)

3. Add Scripts (~/Pages/Shared/_Layout.cshtml)

4. Create Pie Chart (~/Pages/Index.cshtml)

5. Define Data Model (~/Pages/Index.cshtml.cs or separate class)

Common Patterns

Pattern 1: Doughnut Chart with Center Label

Pattern 2: Pie Chart with Smart Labels and Tooltips

Pattern 3: Grouped Data with Small Values

Pattern 4: Funnel Chart with Export

API Reference

AccumulationChart Class

Constructor

Core Properties

Event Properties

AccumulationSeries Class

Properties

AccumulationDataLabelSettings Class

Properties

AccumulationChartLegendSettings Class

Properties

AccumulationChartTooltipSettings Class

Properties

Available Enumerations

Related Classes

Key Properties

AccumulationChart Properties

AccumulationSeries Properties

DataLabel Properties

Common Use Cases

1. Market Share Analysis

2. Budget Allocation

3. Survey Results

4. Sales Funnel Tracking

5. Organizational Hierarchy

6. Mobile Dashboards

7. Report Generation

8. Real-Time Monitoring

Related Components

Browser Support

Additional Resources