Syncfusion React Accumulation Chart

Implementing Syncfusion React Accumulation Charts

A comprehensive skill for implementing Syncfusion's React Accumulation Chart components (AccumulationChartComponent), which provide circular and hierarchical data visualizations including Pie, Doughnut, Funnel, and Pyramid charts with rich interactive features, export capabilities, and full accessibility support.

When to Use This Skill

Use this skill when you need to:

• Create pie or doughnut charts for proportional data display
• Implement funnel or pyramid charts for hierarchical/process visualization
• Display percentage-based or categorical data in circular layouts
• Add interactive features like tooltips, legends, and data labels
• Implement smart label positioning to avoid overlaps
• Create drill-down or multi-level accumulation charts
• Apply explode effects to highlight specific data points
• Group small data values for better visualization
• Customize chart appearance with themes, colors, and patterns
• Handle empty or missing data points elegantly
• Implement accessible data visualizations with WCAG compliance

Component Overview

The Syncfusion React Accumulation Chart component provides four primary chart types:

• Pie Chart: Circular chart divided into slices representing data proportions
• Doughnut Chart: Pie chart with a hollow center (configurable inner radius)
• Funnel Chart: Inverted triangle showing progressive reduction (sales funnels, conversion rates)
• Pyramid Chart: Triangle showing hierarchical data (population pyramids, organizational structures)

Key Features:

• Smart labels that avoid overlapping
• Grouping based on value or point count
• Interactive tooltips and legends
• Explode effects for emphasis
• Semi-pie charts with custom angles
• Multi-level drill-down capability
• Border radius for modern appearance
• Pattern fills and custom colors

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installing @syncfusion/ej2-react-charts package
• Setting up React project (Vite or Create React App)
• Importing AccumulationChartComponent
• Registering CSS themes
• Creating your first pie chart with data binding
• Understanding AccumulationSeriesCollectionDirective pattern
• Basic series configuration (xName, yName, dataSource)

Pie and Doughnut Charts

📄 Read: references/pie-doughnut-charts.md

• Creating basic pie charts with PieSeries injection
• Customizing radius (default 80%, custom values)
• Positioning pie center (centerX, centerY properties)
• Creating doughnut charts with innerRadius
• Various radius pie charts (different slice sizes)
• Semi-pie charts using startAngle and endAngle
• Color and text mapping from data source
• Border radius for modern rounded slices
• Hiding/showing borders on mouse hover
• Applying pattern fills (stripes, dots, grids)
• Multi-level drill-down with pointClick event
• Point customization with pointRender event

Funnel and Pyramid Charts

📄 Read: references/funnel-pyramid-charts.md

• Creating funnel charts with FunnelSeries injection
• Funnel size customization (width and height)
• Neck size configuration (neckWidth, neckHeight)
• Gap between segments (gapRatio 0 to 1)
• Funnel rendering modes (Standard vs Trapezoidal)
• Creating pyramid charts with PyramidSeries injection
• Pyramid rendering modes (Linear vs Surface)
• Pyramid size customization
• Explode effects (explode, explodeOffset, explodeIndex)
• Smart data label positioning for funnels/pyramids

Data Labels

📄 Read: references/data-labels.md

• Enabling data labels (visible property, AccumulationDataLabel injection)
• Positioning labels (Inside vs Outside)
• Rotating data labels (angle and enableRotation)
• Smart labels to prevent overlapping (enableSmartLabels)
• Formatting label text (n, p, c number formats)
• Custom data label templates with HTML
• Connector line customization (type, color, width, length, dashArray)
• Text mapping from data source (name property)
• Customizing labels with textRender event
• Text wrapping (textWrap, maxWidth)
• Displaying percentages in labels (textRender vs template approaches)

Legend Configuration

📄 Read: references/legend.md

• Enabling legend (AccumulationLegend injection)
• Position and alignment (left, right, top, bottom, center, far, near)
• Reversing legend item order
• Legend shape customization (Circle, Rectangle, Triangle, etc.)
• Legend and legend item size configuration
• Automatic pagination for many items
• Text wrapping for long labels (textWrap, maximumLabelWidth)
• Animation on legend click toggle
• Legend title configuration and styling
• Arrow page navigation (enablePages false)
• Legend item padding adjustment
• Layout options (horizontal, vertical, auto with maximumColumns)
• Custom legend templates with HTML
• Fixed width legend items

Tooltip Customization

📄 Read: references/tooltip.md

• Enabling tooltips (AccumulationTooltip injection)
• Custom tooltip headers
• Format strings (${point.x}, ${point.y}, ${series.name})
• Tooltip mapping from data source (tooltipMappingName)
• Custom tooltip templates with HTML/React components
• Fixed tooltip positioning (location property)
• Tooltip styling and appearance

Data Grouping

📄 Read: references/grouping.md

• Grouping by value threshold (groupTo property)
• Grouping by point count
• Group mode configuration (Value vs Point)
• Custom group names and labels
• Group appearance customization
• When to use grouping for better visualization

Annotations

📄 Read: references/annotations.md

• Adding annotations with AccumulationAnnotation injection
• Annotation content and HTML templates
• Positioning annotations (x, y coordinates)
• Coordinate units (Pixel vs Point)
• Multiple annotations per chart
• Dynamic annotation updates

Customization and Styling

📄 Read: references/customization.md

• Point-level customization with pointRender event
• Custom color schemes and palettes
• Setting colors per data point (fill property)
• Border customization (width, color)
• Pattern fills for slices (applyPattern)
• Point-specific styling based on data values
• Conditional styling patterns

Accessibility Features

📄 Read: references/accessibility.md

• WCAG 2.1 compliance features
• Keyboard navigation support (Tab, Arrow keys)
• ARIA attributes configuration
• Screen reader support and announcements
• High contrast mode compatibility
• Advanced accessibility configuration
• Focus indicators and visible focus

Empty Points Handling

📄 Read: references/empty-points.md

• Handling null, undefined, or NaN data
• Empty point modes (Zero, Drop, Average, Gap)
• Customizing empty point appearance
• Fill and border configuration for empty points
• When to use each empty point mode

Appearance and Theming

📄 Read: references/appearance-theming.md

• Built-in themes (Material, Bootstrap, Fluent, Tailwind, Fabric)
• Importing and applying themes
• Gradient fills for slices
• Title and subtitle configuration
• Dynamic data updates and animation
• Chart dimensions and responsive sizing

Export and Print

📄 Read: references/export-print.md

• Enabling export functionality with Export module
• Export to image formats (PNG, JPEG)
• Export to PDF and SVG
• Export customization with beforeExport event
• Print chart functionality
• Exporting multiple charts
• After export event handling
• File naming conventions and best practices

API Reference

📄 Read: references/api-reference.md

• Complete AccumulationChartComponent properties reference
• AccumulationSeriesDirective properties
• All methods (export, print, setAnnotationValue, calculateBounds)
• All events (lifecycle, rendering, mouse, selection, export)
• Common model interfaces (LegendSettings, TooltipSettings, DataLabel)
• Module services and injection requirements
• Event argument interfaces
• Selection patterns reference
• Themes reference
• Complete usage examples with TypeScript

Quick Start Example

Here's a minimal example to create a basic pie chart:

import { 
  AccumulationChartComponent, 
  AccumulationSeriesCollectionDirective, 
  AccumulationSeriesDirective,
  Inject,
  AccumulationLegend,
  AccumulationDataLabel,
  AccumulationTooltip,
  PieSeries
} from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
    { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
    { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
    { x: 'Firefox', y: 4.8, text: 'Firefox: 4.8%' },
    { x: 'Others', y: 4.3, text: 'Others: 4.3%' }
  ];

  return (
    <AccumulationChartComponent 
      id='pie-chart'
      title='Browser Market Share'
      legendSettings={{ visible: true }}
      tooltip={{ enable: true }}
      enableSmartLabels={true}
    >
      <Inject services={[
        AccumulationLegend, 
        AccumulationDataLabel, 
        AccumulationTooltip, 
        PieSeries
      ]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          radius='90%'
          dataLabel={{
            visible: true,
            position: 'Outside',
            name: 'text'
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Common Patterns

Pattern 1: Doughnut Chart with Legend

<AccumulationChartComponent 
  id='doughnut-chart'
  legendSettings={{ visible: true, position: 'Right' }}
>
  <Inject services={[AccumulationLegend, PieSeries]} />
  <AccumulationSeriesCollectionDirective>
    <AccumulationSeriesDirective
      dataSource={data}
      xName='category'
      yName='value'
      innerRadius='40%'  // Creates doughnut hole
      radius='100%'
    />
  </AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>

Pattern 2: Funnel Chart with Data Labels

<AccumulationChartComponent id='funnel-chart'>
  <Inject services={[FunnelSeries, AccumulationDataLabel]} />
  <AccumulationSeriesCollectionDirective>
    <AccumulationSeriesDirective
      dataSource={salesData}
      xName='stage'
      yName='count'
      type='Funnel'
      neckWidth='25%'
      neckHeight='5%'
      gapRatio={0.08}
      dataLabel={{ visible: true, position: 'Outside' }}
    />
  </AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>

Pattern 3: Semi-Pie Chart (Gauge Style)

<AccumulationSeriesDirective
  dataSource={data}
  xName='x'
  yName='y'
  startAngle={270}  // Start from bottom
  endAngle={90}     // End at bottom (semi-circle)
  radius='100%'
  innerRadius='40%'
  dataLabel={{ visible: true, position: 'Inside' }}
/>

Pattern 4: Exploded Pie Chart

<AccumulationSeriesDirective
  dataSource={data}
  xName='product'
  yName='sales'
  explode={true}           // Enable click-to-explode
  explodeOffset='10%'      // Distance when exploded
  explodeIndex={2}         // Explode third slice by default
  explodeAll={false}       // Don't explode all at once
/>

API Reference

AccumulationChartComponent Properties

Core Properties

Feature Properties

Interactive Properties

Layout Properties

Accessibility Properties

AccumulationSeriesDirective Properties

Methods

Events

Key Props Summary

Common Use Cases

1. Market Share Analysis: Pie/doughnut charts showing competitive distribution
2. Sales Funnels: Funnel charts for conversion tracking at each stage
3. Budget Allocation: Pie charts showing spending categories
4. Survey Results: Doughnut charts with percentage breakdowns
5. Population Demographics: Pyramid charts for age distribution
6. Process Efficiency: Funnel charts showing drop-off rates
7. Portfolio Distribution: Pie charts for asset allocation
8. Website Traffic Sources: Doughnut charts with referral data
9. Project Time Allocation: Pie charts for resource distribution
10. Customer Segmentation: Multiple pie charts for cohort analysis

Tips and Best Practices

• Use smart labels when dealing with many small slices to prevent overlap
• Group small values (< 5%) into "Others" category for clarity
• Prefer doughnut over pie when displaying a key metric in the center
• Use funnel mode 'Trapezoidal' for clearer stage comparison
• Enable tooltips for detailed information without cluttering labels
• Choose appropriate colors that provide sufficient contrast
• Consider accessibility by providing text alternatives and keyboard navigation
• Use explode effects sparingly to highlight important data points
• Set enableSmartLabels to true for charts with 8+ data points
• Apply themes consistently with other charts in your application

Related Components

When building comprehensive dashboards, combine Accumulation Charts with:

• Line/Area Charts for trend analysis
• Bar/Column Charts for comparisons
• Gantt Charts for project timelines
• TreeMap for hierarchical proportional data