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
• 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
  • AccumulationSeries Class
  • AccumulationDataLabelSettings Class
  • AccumulationChartLegendSettings Class
  • AccumulationChartTooltipSettings Class
  • 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

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

@{
    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

Event Properties

AccumulationSeries Class

Represents a data series in the accumulation chart.

Properties

AccumulationDataLabelSettings Class

Configures data labels displayed on data points.

Properties

AccumulationChartLegendSettings Class

Configures the legend for the chart.

Properties

AccumulationChartTooltipSettings Class

Configures tooltips for the chart.

Properties

Available Enumerations

Related Classes

Key Properties

AccumulationChart Properties

AccumulationSeries Properties

DataLabel Properties

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

• Syncfusion ASP.NET Core Accumulation Chart Documentation
• API Reference
• Live Demos
• GitHub Examples

Next Steps:

1. Read getting-started.md for detailed installation
2. Explore chart-types.md for type-specific features
3. Review data-visualization.md for styling
4. Check accessibility.md for compliance requirements