Implementing Syncfusion React Accumulation Charts

AccumulationChartComponent

When to Use This Skill

• 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

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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

dataSource

series

title

subTitle

width

height

theme

background

backgroundImage

Feature Properties

enableSmartLabels

enableAnimation

enableBorderOnMouseMove

enableExport

useGroupingSeparator

enablePersistence

enableRtl

enableHtmlSanitizer

Interactive Properties

selectionMode

selectionPattern

highlightMode

highlightPattern

highlightColor

isMultiSelect

selectedDataIndexes

Layout Properties

center

margin

border

legendSettings

tooltip

annotations

centerLabel

Accessibility Properties

accessibility

focusBorderColor

focusBorderWidth

focusBorderMargin

locale

AccumulationSeriesDirective Properties

type

dataSource

xName

yName

radius

innerRadius

startAngle

endAngle

explode

explodeAll

explodeIndex

explodeOffset

neckWidth

neckHeight

gapRatio

width

height

groupTo

groupMode

pointColorMapping

borderRadius

applyPattern

Methods

export()

print()

calculateBounds()

setAnnotationValue()

Events

load

loaded

seriesRender

pointRender

textRender

legendRender

legendClick

annotationRender

tooltipRender

pointClick

pointMove

chartMouseClick

chartMouseDown

chartMouseUp

chartMouseMove

chartMouseLeave

chartDoubleClick

animationComplete

selectionComplete

resized

beforeResize

beforePrint

beforeExport

afterExport

Key Props Summary

type

'Pie'

'Funnel'

'Pyramid'

radius

'90%'

'100%'

innerRadius

'0%'

'40%'

startAngle

endAngle

0

360

explode

true

false

neckWidth

neckHeight

'25%'

'5%'

gapRatio

0

1

enableSmartLabels

true

false

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

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