Implementing Accumulation Charts in Syncfusion TypeScript & JavaScript

The Syncfusion Accumulation Chart component provides powerful visualization tools for creating interactive pie charts, doughnut charts, funnel charts, and pyramid charts. With advanced customization options, interactive features, multiple chart types, and comprehensive data handling capabilities, you can create professional percentage-based and categorical visualizations for any use case. Works in both TypeScript (with full type safety) and JavaScript (ES5 CDN-based or webpack).

Platform Support

This skill covers both TypeScript and JavaScript implementations:

TypeScript (Primary):

• Full type definitions and IDE support
• Module-based imports with AccumulationChart.Inject()
• Webpack/bundler-based setup
• Advanced type checking

JavaScript (ES5):

• CDN-based or local script loading
• Global namespace access (ej.charts.AccumulationChart)
• No build step required
• Compatible with ES5 and modern browsers

Where noted, code examples show both TS and JS variants. Choose based on your project setup.

When to Use This Skill

Use this skill when you need to:

• Create pie charts - Basic pie chart with data points and series
• Build doughnut charts - Pie chart with inner radius (donut hole)
• Implement funnel charts - Funnel-shaped data visualization
• Design pyramid charts - Pyramid-shaped hierarchical visualization
• Configure chart types - Switch between Pie, Doughnut, Funnel, Pyramid
• Customize legends - Position, align, and style legend elements
• Add data labels - Configure label positioning and content
• Enable tooltips - Interactive hover information
• Implement selection - Point and series selection modes
• Add annotations - Custom annotations and markers
• Apply styling - Colors, gradients, themes, and responsive design
• Ensure accessibility - WCAG compliance, keyboard navigation, screen reader support
• Export charts - PNG, SVG, PDF, or print functionality
• Handle dynamic data - Real-time data updates and animations

Accumulation Chart Overview

Accumulation charts visualize data as proportions of a whole, ideal for:

• Pie Charts - Show percentage distribution of categories
• Doughnut Charts - Pie variant with center label capability
• Funnel Charts - Funnel-shaped representations (stages, conversion funnels)
• Pyramid Charts - Pyramid-shaped hierarchical data visualization

All types support interactive features, custom styling, multiple series, and rich configuration options.

Navigation Guide

Choose the reference that matches your task:

Getting Started

📄 Read: references/getting-started.md

• Installation and setup for TypeScript and JavaScript
• Dependencies and package configuration
• Creating your first accumulation chart
• Basic pie chart implementation
• Module injection and initialization patterns

Chart Types & Selection

📄 Read: references/chart-types.md

• Pie chart fundamentals and implementation
• Doughnut charts with inner radius and center labels
• Funnel charts and data arrangement
• Pyramid charts and reverse mode
• Radius and size customization for each type
• Comparison matrix: when to use each type

Legend Configuration

📄 Read: references/legend-configuration.md

• Legend positioning (left, right, top, bottom)
• Alignment options (center, near, far)
• Legend styling and customization
• Visibility and interactive legend features
• Responsive legend behavior

Data Labels

📄 Read: references/data-labels.md

• Enabling and configuring data labels
• Label positioning (inside, outside)
• Smart label arrangement and overlap prevention
• Label formatting and templates
• Dynamic label visibility

Tooltips & Selection

📄 Read: references/tooltips-and-selection.md

• Tooltip configuration and styling
• Custom tooltip templates
• Point selection modes (Single, Multiple, None)
• Series selection capabilities
• Event handling for interactions

Annotations & Features

📄 Read: references/annotations-and-features.md

• Adding annotations to charts
• Gradient fills and custom colors
• Center labels for doughnut charts
• Grouping and clubbing data points
• Empty point handling and visibility

Customization & Styling

📄 Read: references/customization-and-styling.md

• CSS class customization and styling
• Theme options (Material, Bootstrap, Fabric, etc.)
• Responsive sizing and dimensions
• Print and export functionality
• Title and subtitle configuration

Accessibility & Advanced Features

📄 Read: references/accessibility-and-advanced.md

• WCAG compliance and accessibility standards
• Keyboard navigation and focus management
• Screen reader support and ARIA attributes
• Dynamic data updates and animations
• Real-time chart updates
• Performance optimization for large datasets
• Troubleshooting common issues

API Reference

📄 Read: references/api-reference.md

• Complete AccumulationChart API reference
• All properties, methods, and events
• Interface and model definitions
• Module injection and enums
• Comprehensive API tables with links to official documentation

Quick Start Example

TypeScript:

import { AccumulationChart, AccumulationDataLabel, AccumulationLegend, AccumulationTooltip } from '@syncfusion/ej2-charts';

// Inject required modules
AccumulationChart.Inject( AccumulationDataLabel, AccumulationLegend, AccumulationTooltip);

const data = [
  { x: 'Jan', y: 18, text: 'January' },
  { x: 'Feb', y: 18, text: 'February' },
  { x: 'Mar', y: 18, text: 'March' },
  { x: 'Apr', y: 20, text: 'April' }
];

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pie'
  }],
  tooltip: { enable: true },
  legendSettings: { visible: true }
}, '#chart');

Common Patterns

Pattern 1: Basic Pie Chart with Legend

Standard pie chart showing data distribution with legend for category identification:

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pie' // `type` is optional for `Pie` since it is default
  }],
  legendSettings: { visible: true, position: 'Right' }
}, '#chart');

Pattern 2: Doughnut Chart with Center Label

Doughnut chart with center text for additional information:

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    innerRadius: '40%'    // no explicit type for doughnut chart, innerRadius itself renders doughnut.
  }],
  centerLabel: { text: 'Sales', hoverTextFormat: '${point.x}: ${point.y}%' }
}, '#chart');

Pattern 3: Funnel Chart with Custom Colors

Funnel visualization showing progression through stages:

Note Import and Inject FunnelSeries.

const chart = new AccumulationChart({
  series: [{
    dataSource: stageData,
    xName: 'stage',
    yName: 'users',
    type: 'Funnel',
    neckWidth: '15%'
  }]
}, '#chart');

Pattern 4: Pyramid Chart Reversed

Pyramid visualization:

Note Import and Inject PyramidSeries.

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pyramid',
    pyramidMode: 'Linear',
  }]
}, '#chart');

Pattern 5: Interactive Selection with Tooltip

Point selection with detailed tooltips:

Note Import and Inject AccumulationTooltip and AccumulationSelection.

const chart = new AccumulationChart({
  series: [{
    dataSource: data,
    xName: 'x',
    yName: 'y',
    type: 'Pie',
    dataLabel: { 
      visible: true,
      position: 'Outside',
      name: 'text'
    }
  }],
  selectionMode: 'Point',
  tooltip: { 
    enable: true,
    format: '${point.x}: <b>${point.y}%</b>'
  }
}, '#chart');

Key Properties

For detailed information on all properties, methods, and events, see API Reference.

Chart-level:

• series - Array of series configurations | API
• height, width - Chart dimensions | API
• title - Chart title text | API
• tooltip - Tooltip configuration | API
• legendSettings - Legend positioning and styling | API
• background - Chart background color/image | API
• centerLabel - Center label for doughnut (TS & JS) | API

Series-level:

• dataSource - Array of data points | API
• xName, yName - Data field mapping | API
• type - Chart type: 'Pie', 'Doughnut', 'Funnel', 'Pyramid'
• radius - Chart radius (percentage or pixel)
• innerRadius - Inner radius for doughnut charts
• neckWidth - Funnel neck width
• gapRatio - Space between pyramid segments
• explode - Point explosion (separation)
• dataLabel - Data label configuration | API
• marker - Point marker styling

Interaction:

• selectionMode - 'Point', 'Series', or 'None' | API
• selectionPattern - Chessboard, Dots, DiagonalForward, etc. | API
• highlightPattern - Highlight pattern on hover | API
• highlightMode - 'Point', 'Series', or 'None' | API

Styling:

• palette - Color scheme array
• theme - Material, Bootstrap, Fabric, HighContrast, Fluent | API
• enableSmartLabels - Smart label positioning | API
• enableAnimation - Animation on load | API
• animationDuration - Animation duration in milliseconds

Accessibility:

• accessibility - Accessibility configuration object | API
• tabIndex - Tab index for keyboard navigation
• ariaLabel - ARIA label for screen readers