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

Accessibility

Table of Contents

• Overview
• WCAG Compliance
• Keyboard Navigation
• ARIA Attributes
• Screen Reader Support
• High Contrast Mode
• Focus Management
• Accessible Color Palettes

Overview

Accessibility features ensure that accumulation charts are usable by people with disabilities, including those who rely on screen readers, keyboard navigation, or high contrast modes.

WCAG Compliance

Syncfusion Accumulation Charts follow WCAG 2.1 guidelines for accessible data visualizations:

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

function AccessibleChart() {
  const data = [
    { x: 'Chrome', y: 61.3 },
    { x: 'Safari', y: 24.6 },
    { x: 'Firefox', y: 14.1 }
  ];

  return (
    <AccumulationChartComponent 
      id='accessible-chart'
      title='Browser Market Share'
      tabIndex={0}  // Make chart focusable
    >
      <Inject services={[PieSeries, AccumulationDataLabel]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          dataLabel={{ visible: true }}  // Visible labels for all users
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

WCAG compliance features:

• Keyboard navigation support (Level A)
• Screen reader compatibility (Level A)
• Color contrast ratios meet AA standards
• Text alternatives for visual content (Level A)
• Focus indicators (Level AA)

Keyboard Navigation

Enable full keyboard control for chart interaction:

function KeyboardNavigation() {
  const data = [
    { x: 'Q1', y: 35 },
    { x: 'Q2', y: 28 },
    { x: 'Q3', y: 42 },
    { x: 'Q4', y: 31 }
  ];

  return (
    <AccumulationChartComponent 
      id='keyboard-nav'
      title='Quarterly Sales (Use arrow keys to navigate)'
      tabIndex={0}
      selectionMode='Point'  // Enable point selection
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Keyboard shortcuts:

• Tab: Focus on chart
• Arrow Keys (←→↑↓): Navigate between data points
• Enter/Space: Select focused point
• Escape: Clear selection
• Home: Focus first point
• End: Focus last point

Keyboard event handling:

function KeyboardEvents() {
  const data = [
    { x: 'Chrome', y: 61.3 },
    { x: 'Safari', y: 24.6 },
    { x: 'Firefox', y: 14.1 }
  ];

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' || e.key === ' ') {
      console.log('Point selected via keyboard');
    }
  };

  return (
    <AccumulationChartComponent 
      id='keyboard-events'
      tabIndex={0}
      onKeyDown={handleKeyDown}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes provide context for assistive technologies:

function ARIAAttributes() {
  const data = [
    { x: 'Chrome', y: 61.3 },
    { x: 'Safari', y: 24.6 },
    { x: 'Firefox', y: 14.1 }
  ];

  return (
    <div>
      <AccumulationChartComponent 
        id='aria-chart'
        title='Browser Market Share'
        tabIndex={0}
        role='img'
        aria-label='Pie chart showing browser market share. Chrome leads with 61.3%, followed by Safari at 24.6% and Firefox at 14.1%'
      >
        <Inject services={[PieSeries]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='x'
            yName='y'
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>
      
      {/* Text alternative for complete accessibility */}
      <div className="sr-only">
        <h3>Browser Market Share Data</h3>
        <ul>
          {data.map((item, index) => (
            <li key={index}>
              {item.x}: {item.y}%
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

Key ARIA attributes:

• role='img': Identifies chart as image
• aria-label: Provides chart description
• aria-describedby: Links to detailed description
• aria-live: Announces dynamic updates
• tabIndex={0}: Makes element keyboard-focusable

Dynamic ARIA labels:

function DynamicARIA() {
  const [selectedPoint, setSelectedPoint] = React.useState<string>('');
  
  const data = [
    { x: 'Product A', y: 45 },
    { x: 'Product B', y: 30 },
    { x: 'Product C', y: 25 }
  ];

  const total = data.reduce((sum, item) => sum + item.y, 0);

  const onPointClick = (args: any) => {
    setSelectedPoint(`${args.point.x}: ${args.point.y} units (${((args.point.y/total)*100).toFixed(1)}%)`);
  };

  return (
    <div>
      <AccumulationChartComponent 
        id='dynamic-aria'
        tabIndex={0}
        pointClick={onPointClick}
        aria-label={`Sales distribution chart. ${selectedPoint || 'Click a slice for details'}`}
        aria-live='polite'
      >
        <Inject services={[PieSeries]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='x'
            yName='y'
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>
      
      <div 
        id='chart-description' 
        aria-live='polite'
        style={{ position: 'absolute', left: '-9999px' }}
      >
        {selectedPoint}
      </div>
    </div>
  );
}

Screen Reader Support

Optimize charts for screen reader users:

function ScreenReaderOptimized() {
  const data = [
    { x: 'Completed', y: 65, status: 'success' },
    { x: 'In Progress', y: 25, status: 'warning' },
    { x: 'Failed', y: 10, status: 'error' }
  ];

  const total = data.reduce((sum, item) => sum + item.y, 0);

  const generateDescription = () => {
    const descriptions = data.map(item => 
      `${item.x}: ${item.y} tasks, which is ${((item.y/total)*100).toFixed(1)}% of total`
    );
    return `Task status chart. Total ${total} tasks. ${descriptions.join('. ')}.`;
  };

  return (
    <div>
      <h2 id='chart-title'>Task Status Distribution</h2>
      
      <AccumulationChartComponent 
        id='screen-reader-chart'
        tabIndex={0}
        role='img'
        aria-labelledby='chart-title'
        aria-describedby='chart-detailed-description'
      >
        <Inject services={[PieSeries]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='x'
            yName='y'
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>

      <div 
        id='chart-detailed-description' 
        className='sr-only'
      >
        {generateDescription()}
      </div>

      {/* Fallback data table */}
      <table className='sr-only'>
        <caption>Task Status Data</caption>
        <thead>
          <tr>
            <th>Status</th>
            <th>Count</th>
            <th>Percentage</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td>{item.x}</td>
              <td>{item.y}</td>
              <td>{((item.y/total)*100).toFixed(1)}%</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Screen reader best practices:

• Provide meaningful chart titles
• Include detailed text descriptions
• Offer data table alternative
• Use semantic HTML structure
• Announce dynamic updates with aria-live

High Contrast Mode

Support high contrast mode for users with visual impairments:

function HighContrastMode() {
  const data = [
    { x: 'Category A', y: 35 },
    { x: 'Category B', y: 28 },
    { x: 'Category C', y: 22 },
    { x: 'Category D', y: 15 }
  ];

  // High contrast color palette
  const highContrastPalette = [
    '#000000',  // Black
    '#FFFFFF',  // White
    '#FFFF00',  // Yellow
    '#00FF00'   // Green
  ];

  return (
    <AccumulationChartComponent 
      id='high-contrast'
      palettes={highContrastPalette}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          border={{
            width: 3,
            color: '#000000'  // Strong borders for definition
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

High contrast features:

• Strong color contrasts (minimum 4.5:1 ratio)
• Bold borders between slices
• Clear focus indicators
• Pattern fills as alternative to color

Focus Management

Implement clear focus indicators and management:

function FocusManagement() {
  const chartRef = React.useRef<AccumulationChartComponent>(null);
  const data = [
    { x: 'Item A', y: 45 },
    { x: 'Item B', y: 30 },
    { x: 'Item C', y: 25 }
  ];

  const focusChart = () => {
    chartRef.current?.element?.focus();
  };

  return (
    <div>
      <button onClick={focusChart}>
        Focus Chart
      </button>

      <AccumulationChartComponent 
        id='focus-management'
        ref={chartRef}
        tabIndex={0}
        selectionMode='Point'
        style={{
          outline: '2px solid transparent',
          outlineOffset: '2px'
        }}
        // CSS will handle focus styling
      >
        <Inject services={[PieSeries]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='x'
            yName='y'
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>

      <style>{`
        #focus-management:focus {
          outline: 3px solid #0078d4;
          outline-offset: 2px;
        }
      `}</style>
    </div>
  );
}

Accessible Color Palettes

Use color-blind friendly palettes:

function ColorBlindFriendly() {
  const data = [
    { x: 'Category A', y: 35 },
    { x: 'Category B', y: 28 },
    { x: 'Category C', y: 22 },
    { x: 'Category D', y: 15 }
  ];

  // Color-blind safe palette (deuteranopia-friendly)
  const accessiblePalette = [
    '#0173B2',  // Blue
    '#DE8F05',  // Orange
    '#029E73',  // Green
    '#CC78BC'   // Purple
  ];

  return (
    <AccumulationChartComponent 
      id='colorblind-friendly'
      title='Accessible Color Palette'
      palettes={accessiblePalette}
    >
      <Inject services={[PieSeries, AccumulationDataLabel]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          dataLabel={{ visible: true }}  // Labels help identify categories
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Accessible palette guidelines:

• Avoid red-green combinations
• Use high luminance contrast
• Include patterns or textures
• Test with color blindness simulators
• Provide labels as primary identification

Common Issues and Solutions

Issue: Chart not keyboard accessible

• Solution: Add tabIndex={0} to make chart focusable
• Solution: Enable selectionMode='Point' for navigation
• Solution: Verify chart is not inside non-focusable container

Issue: Screen reader not announcing chart

• Solution: Add role='img' and aria-label attributes
• Solution: Provide detailed text description with aria-describedby
• Solution: Include hidden data table alternative

Issue: Focus indicator not visible

• Solution: Add CSS outline styles for :focus state
• Solution: Ensure outline contrasts with background
• Solution: Test with keyboard-only navigation

Issue: Colors hard to distinguish

• Solution: Use accessible color palettes
• Solution: Add border to slices for definition
• Solution: Enable data labels for all slices
• Solution: Consider pattern fills

Issue: Dynamic updates not announced

• Solution: Use aria-live='polite' or 'assertive'
• Solution: Update aria-label when data changes
• Solution: Provide status messages for updates

Annotations

Overview

Annotations add custom HTML content, text, or images at specific positions on the chart, providing additional context, labels, or visual elements beyond standard chart features.

Basic Annotation

Add annotations using the annotations property with AccumulationAnnotationsDirective:

import { 
  AccumulationChartComponent,
  AccumulationSeriesCollectionDirective,
  AccumulationSeriesDirective,
  AccumulationAnnotationsDirective,
  AccumulationAnnotationDirective,
  Inject,
  PieSeries,
  AccumulationAnnotation
} from '@syncfusion/ej2-react-charts';

function BasicAnnotation() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 }
  ];

  return (
    <AccumulationChartComponent id='annotation-chart'>
      <Inject services={[PieSeries, AccumulationAnnotation]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
      <AccumulationAnnotationsDirective>
        <AccumulationAnnotationDirective
          content='<div style="font-size:18px;font-weight:bold;">Q1 Sales</div>'
          region='Series'  // 'Chart' or 'Series'
          x='50%'
          y='50%'
        />
      </AccumulationAnnotationsDirective>
    </AccumulationChartComponent>
  );
}

Key properties:

• content: HTML string or template
• region: 'Chart' (relative to chart area) or 'Series' (relative to series)
• x, y: Position (pixels, percentages, or coordinates)
• coordinateUnits: 'Pixel' or 'Point' positioning

Positioning Annotations

Position annotations using different coordinate systems:

Pixel-based positioning:

<AccumulationAnnotationDirective
  content='<div>Top Left</div>'
  region='Chart'
  coordinateUnits='Pixel'
  x='20'
  y='20'
/>

Percentage-based positioning:

<AccumulationAnnotationDirective
  content='<div>Center</div>'
  region='Series'
  x='50%'
  y='50%'
/>

Complete positioning example:

function PositionedAnnotations() {
  const data = [
    { x: 'Chrome', y: 61.3 },
    { x: 'Safari', y: 24.6 },
    { x: 'Firefox', y: 14.1 }
  ];

  return (
    <AccumulationChartComponent 
      id='positioned-annotations'
      title='Browser Market Share'
    >
      <Inject services={[PieSeries, AccumulationAnnotation]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          innerRadius='40%'
        />
      </AccumulationSeriesCollectionDirective>
      <AccumulationAnnotationsDirective>
        {/* Center annotation */}
        <AccumulationAnnotationDirective
          content='<div style="font-size:24px;font-weight:bold;color:#333;">100M</div>'
          region='Series'
          x='50%'
          y='50%'
        />
        {/* Bottom note */}
        <AccumulationAnnotationDirective
          content='<div style="font-size:12px;color:#666;">*Data as of 2024</div>'
          region='Chart'
          coordinateUnits='Pixel'
          x='10'
          y='380'
        />
      </AccumulationAnnotationsDirective>
    </AccumulationChartComponent>
  );
}

Annotation Templates

Create complex annotations using React components:

function TemplateAnnotations() {
  const data = [
    { x: 'Product A', y: 45, status: 'success' },
    { x: 'Product B', y: 30, status: 'warning' },
    { x: 'Product C', y: 25, status: 'info' }
  ];

  const centerTemplate = () => {
    return (
      <div style={{
        textAlign: 'center',
        padding: '10px',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#0078d4' }}>
          100
        </div>
        <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
          Total Items
        </div>
      </div>
    );
  };

  return (
    <AccumulationChartComponent id='template-annotations'>
      <Inject services={[PieSeries, AccumulationAnnotation]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          innerRadius='50%'
        />
      </AccumulationSeriesCollectionDirective>
      <AccumulationAnnotationsDirective>
        <AccumulationAnnotationDirective
          content={centerTemplate}
          region='Series'
          x='50%'
          y='50%'
        />
      </AccumulationAnnotationsDirective>
    </AccumulationChartComponent>
  );
}

Multiple Annotations

Add multiple annotations for complex layouts:

function MultipleAnnotations() {
  const data = [
    { x: 'Q1', y: 35 },
    { x: 'Q2', y: 28 },
    { x: 'Q3', y: 42 },
    { x: 'Q4', y: 31 }
  ];

  return (
    <AccumulationChartComponent 
      id='multiple-annotations'
      title='Quarterly Performance'
    >
      <Inject services={[PieSeries, AccumulationAnnotation]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          innerRadius='40%'
        />
      </AccumulationSeriesCollectionDirective>
      <AccumulationAnnotationsDirective>
        {/* Center total */}
        <AccumulationAnnotationDirective
          content='<div style="text-align:center;"><div style="font-size:32px;font-weight:bold;color:#333;">136</div><div style="font-size:14px;color:#666;">Total Sales</div></div>'
          region='Series'
          x='50%'
          y='45%'
        />
        {/* Growth indicator */}
        <AccumulationAnnotationDirective
          content='<div style="color:#28a745;font-size:16px;font-weight:bold;">↑ 12%</div>'
          region='Series'
          x='50%'
          y='60%'
        />
        {/* Footer note */}
        <AccumulationAnnotationDirective
          content='<div style="font-size:11px;color:#999;font-style:italic;">Year over Year Growth</div>'
          region='Chart'
          coordinateUnits='Pixel'
          x='150'
          y='390'
        />
      </AccumulationAnnotationsDirective>
    </AccumulationChartComponent>
  );
}

Dynamic Annotations

Update annotations dynamically based on data or state:

function DynamicAnnotations() {
  const [selectedQuarter, setSelectedQuarter] = React.useState('Q3');
  
  const data = [
    { x: 'Q1', y: 35 },
    { x: 'Q2', y: 28 },
    { x: 'Q3', y: 42 },
    { x: 'Q4', y: 31 }
  ];

  const total = data.reduce((sum, item) => sum + item.y, 0);
  const selected = data.find(d => d.x === selectedQuarter);

  const onPointClick = (args: any) => {
    setSelectedQuarter(args.point.x);
  };

  return (
    <AccumulationChartComponent 
      id='dynamic-annotations'
      pointClick={onPointClick}
    >
      <Inject services={[PieSeries, AccumulationAnnotation]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          innerRadius='50%'
        />
      </AccumulationSeriesCollectionDirective>
      <AccumulationAnnotationsDirective>
        <AccumulationAnnotationDirective
          content={`<div style="text-align:center;">
            <div style="font-size:24px;font-weight:bold;color:#0078d4;">${total}</div>
            <div style="font-size:12px;color:#666;margin-top:4px;">Total</div>
            <div style="font-size:16px;font-weight:600;color:#333;margin-top:8px;">${selectedQuarter}</div>
            <div style="font-size:14px;color:#28a745;">${selected?.y}</div>
          </div>`}
          region='Series'
          x='50%'
          y='50%'
        />
      </AccumulationAnnotationsDirective>
    </AccumulationChartComponent>
  );
}

Image Annotations

Add image annotations for logos or icons:

function ImageAnnotation() {
  const data = [
    { x: 'Mobile', y: 55 },
    { x: 'Desktop', y: 30 },
    { x: 'Tablet', y: 15 }
  ];

  return (
    <AccumulationChartComponent id='image-annotation'>
      <Inject services={[PieSeries, AccumulationAnnotation]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          innerRadius='40%'
        />
      </AccumulationSeriesCollectionDirective>
      <AccumulationAnnotationsDirective>
        {/* Image in center */}
        <AccumulationAnnotationDirective
          content='<img src="logo.png" style="width:60px;height:60px;" />'
          region='Series'
          x='50%'
          y='50%'
        />
        {/* Watermark */}
        <AccumulationAnnotationDirective
          content='<img src="watermark.png" style="opacity:0.1;width:200px;" />'
          region='Chart'
          coordinateUnits='Pixel'
          x='100'
          y='150'
        />
      </AccumulationAnnotationsDirective>
    </AccumulationChartComponent>
  );
}

Styled Annotations

Apply advanced styling to annotations:

function StyledAnnotations() {
  const data = [
    { x: 'Approved', y: 65 },
    { x: 'Pending', y: 25 },
    { x: 'Rejected', y: 10 }
  ];

  const styledContent = `
    <div style="
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 15px 20px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      text-align: center;
      color: white;
    ">
      <div style="font-size: 28px; font-weight: bold;">65%</div>
      <div style="font-size: 12px; margin-top: 4px; opacity: 0.9;">Approval Rate</div>
    </div>
  `;

  return (
    <AccumulationChartComponent id='styled-annotations'>
      <Inject services={[PieSeries, AccumulationAnnotation]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          innerRadius='50%'
        />
      </AccumulationSeriesCollectionDirective>
      <AccumulationAnnotationsDirective>
        <AccumulationAnnotationDirective
          content={styledContent}
          region='Series'
          x='50%'
          y='50%'
        />
      </AccumulationAnnotationsDirective>
    </AccumulationChartComponent>
  );
}

Common Issues and Solutions

Issue: Annotation not visible

• Solution: Ensure AccumulationAnnotation module is injected
• Solution: Check x, y coordinates are within chart bounds
• Solution: Verify content HTML is valid
• Solution: Check z-index if overlapping with other elements

Issue: Annotation positioned incorrectly

• Solution: Use percentage values ('50%') for center positioning
• Solution: Check region property ('Chart' vs 'Series')
• Solution: Verify coordinateUnits matches coordinate type
• Solution: Test with pixel coordinates for absolute positioning

Issue: Template not rendering

• Solution: Ensure content is function returning JSX or HTML string
• Solution: Check for React errors in browser console
• Solution: Verify template syntax is correct

Issue: Annotation overlaps chart elements

• Solution: Adjust x, y coordinates
• Solution: Use CSS positioning within content
• Solution: Consider using data labels instead for point-specific info
• Solution: Reduce annotation size or reposition

Issue: Dynamic updates not reflecting

• Solution: Ensure annotation dependencies trigger re-render
• Solution: Use state/props to update content dynamically
• Solution: Check that content string changes on update

````markdown

API Reference

Table of Contents

• AccumulationChartComponent Properties
• AccumulationChartComponent Methods
• AccumulationChartComponent Events
• AccumulationSeriesDirective Properties
• Common Model Interfaces
• Module Services

---

AccumulationChartComponent Properties

Complete reference for AccumulationChartComponent properties based on the official Syncfusion EJ2 React Accumulation Charts API.

Core Configuration

Data and Series

Styling

Color Configuration

Interaction Features

Smart Labels

Legend

Tooltip

Annotations

Center Label

Accessibility

Display Options

Export and Print

State Management

No Data Template

Module References (Read-Only)

These properties reference injected modules and are set automatically when services are injected.

---

AccumulationChartComponent Methods

Methods available on the AccumulationChartComponent instance via refs.

Chart Manipulation

const chartRef = useRef(null);

// Access methods via chartRef.current

Display Methods

Export and Print

Annotations

Utility Methods

---

AccumulationChartComponent Events

Event handlers for accumulation chart interactions and lifecycle.

Lifecycle Events

Rendering Events

Animation Events

Mouse Events

Point Events

Legend Events

Selection Events

Export/Print Events

---

AccumulationSeriesDirective Properties

Properties for configuring individual accumulation series (Pie, Doughnut, Funnel, Pyramid).

Core Series Properties

Query for Remote Data

Pie and Doughnut Properties

Funnel and Pyramid Properties

Explode Properties

Styling

Data Labels

Grouping

Empty Points

Animation

Legend Mapping

Tooltips

Visibility

---

Common Model Interfaces

Key model interfaces used in accumulation chart configuration.

LegendSettingsModel

interface LegendSettingsModel {
  visible?: boolean;
  position?: 'Top' | 'Bottom' | 'Left' | 'Right' | 'Auto';
  alignment?: 'Near' | 'Center' | 'Far';
  toggleVisibility?: boolean;
  background?: string;
  border?: BorderModel;
  padding?: number;
  margin?: MarginModel;
  height?: string;
  width?: string;
  textStyle?: FontModel;
  shapeHeight?: number;
  shapeWidth?: number;
  shapePadding?: number;
  enablePages?: boolean;
  textWrap?: 'Normal' | 'Wrap' | 'AnyWhere';
  maximumLabelWidth?: number;
  title?: string;
  titleStyle?: FontModel;
  template?: string | Function;
}

TooltipSettingsModel

interface TooltipSettingsModel {
  enable?: boolean;
  enableMarker?: boolean;
  format?: string;
  template?: string | Function;
  fill?: string;
  border?: BorderModel;
  opacity?: number;
  header?: string;
  textStyle?: FontModel;
  location?: { x: number; y: number };
  enableAnimation?: boolean;
  duration?: number;
  fadeOutDuration?: number;
}

AccumulationDataLabelSettingsModel

interface AccumulationDataLabelSettingsModel {
  visible?: boolean;
  position?: 'Inside' | 'Outside';
  name?: string; // Property name for label text
  format?: string;
  font?: FontModel;
  fill?: string;
  border?: BorderModel;
  angle?: number;
  enableRotation?: boolean;
  maxWidth?: number;
  textWrap?: 'Normal' | 'Wrap' | 'AnyWhere';
  connectorStyle?: ConnectorModel;
  template?: string | Function;
}

ConnectorModel

interface ConnectorModel {
  type?: 'Line' | 'Curve';
  length?: string;
  width?: number;
  color?: string;
  dashArray?: string;
}

BorderModel

interface BorderModel {
  width?: number;
  color?: string;
  dashArray?: string;
}

MarginModel

interface MarginModel {
  left?: number;
  right?: number;
  top?: number;
  bottom?: number;
}

PieCenterModel

interface PieCenterModel {
  x?: string;
  y?: string;
}

CenterLabelModel

interface CenterLabelModel {
  text?: string;
  textStyle?: FontModel;
  hoverTextFormat?: string;
}

AccumulationAnnotationSettingsModel

interface AccumulationAnnotationSettingsModel {
  content?: string | Function;
  x?: string | number;
  y?: string | number;
  coordinateUnits?: 'Pixel' | 'Point';
  region?: 'Chart' | 'Series';
  description?: string;
}

EmptyPointSettingsModel

interface EmptyPointSettingsModel {
  mode?: 'Zero' | 'Drop' | 'Average' | 'Gap';
  fill?: string;
  border?: BorderModel;
}

FontModel

interface FontModel {
  size?: string;
  fontFamily?: string;
  fontWeight?: string;
  fontStyle?: string;
  color?: string;
  textAlignment?: 'Near' | 'Center' | 'Far';
  textOverflow?: 'None' | 'Trim' | 'Wrap';
}

IndexesModel

interface IndexesModel {
  series: number;
  point: number;
}

AnimationModel

interface AnimationModel {
  enable?: boolean;
  duration?: number;
  delay?: number;
}

AccessibilityModel

interface AccessibilityModel {
  accessibilityDescription?: string;
  accessibilityRole?: string;
}

---

Module Services

Services that must be injected via <Inject services={[...]} /> to enable features.

Accumulation Chart Types

import {
  PieSeries,
  FunnelSeries,
  PyramidSeries
} from '@syncfusion/ej2-react-charts';

Note: PieSeries is used for both Pie and Doughnut charts (doughnut is created by setting innerRadius > 0%).

Features

import {
  AccumulationLegend,
  AccumulationTooltip,
  AccumulationDataLabel,
  AccumulationSelection,
  AccumulationHighlight,
  AccumulationAnnotation,
  Export
} from '@syncfusion/ej2-react-charts';

Module Descriptions

---

Usage Example with API References

Basic Pie Chart with All Features

import React, { useRef, useState } from 'react';
import {
  AccumulationChartComponent,
  AccumulationSeriesCollectionDirective,
  AccumulationSeriesDirective,
  AccumulationAnnotationsDirective,
  AccumulationAnnotationDirective,
  Inject,
  PieSeries,
  AccumulationLegend,
  AccumulationTooltip,
  AccumulationDataLabel,
  AccumulationSelection,
  AccumulationHighlight,
  AccumulationAnnotation,
  Export
} from '@syncfusion/ej2-react-charts';

export default function APIExampleAccumulationChart() {
  const chartRef = useRef(null);
  const [selectedPoint, setSelectedPoint] = useState(null);

  const data = [
    { browser: 'Chrome', share: 61.3, fill: '#4285F4' },
    { browser: 'Safari', share: 24.6, fill: '#0088FF' },
    { browser: 'Firefox', share: 14.1, fill: '#FF6600' },
    { browser: 'Edge', share: 5.0, fill: '#0078D4' },
    { browser: 'Others', share: 5.0, fill: '#999999' }
  ];

  const handleExport = (type) => {
    chartRef.current?.export(type, `browser-chart-${Date.now()}`);
  };

  const handlePrint = () => {
    chartRef.current?.print();
  };

  const onPointClick = (args) => {
    setSelectedPoint(`${args.point.x}: ${args.point.y}%`);
  };

  const onLoad = (args) => {
    console.log('Accumulation Chart loaded');
  };

  const onPointRender = (args) => {
    // Customize points dynamically
    if (args.point.y > 50) {
      args.border = { width: 3, color: '#28a745' };
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '15px' }}>
        <button onClick={() => handleExport('PNG')}>Export PNG</button>
        <button onClick={() => handleExport('PDF')}>Export PDF</button>
        <button onClick={handlePrint}>Print</button>
        {selectedPoint && (
          <span style={{ marginLeft: '15px', fontWeight: 'bold' }}>
            Selected: {selectedPoint}
          </span>
        )}
      </div>

      <AccumulationChartComponent
        ref={chartRef}
        id='api-accumulation-chart'
        width='100%'
        height='450px'
        title='Browser Market Share 2024'
        subTitle='Desktop and Mobile Combined'
        theme='Material'
        background='#ffffff'
        enableSmartLabels={true}
        enableAnimation={true}
        enableBorderOnMouseMove={true}
        selectionMode='Point'
        highlightMode='Point'
        highlightColor='#ff4081'
        selectionPattern='DiagonalForward'
        isMultiSelect={false}
        selectedDataIndexes={[{ series: 0, point: 0 }]}
        center={{ x: '50%', y: '50%' }}
        enableExport={true}
        useGroupingSeparator={true}
        margin={{ left: 20, right: 20, top: 50, bottom: 20 }}
        border={{ width: 0 }}
        titleStyle={{
          fontFamily: 'Segoe UI',
          size: '20px',
          fontWeight: '600',
          color: '#333'
        }}
        subTitleStyle={{
          fontFamily: 'Segoe UI',
          size: '14px',
          color: '#666'
        }}
        legendSettings={{
          visible: true,
          position: 'Right',
          alignment: 'Center',
          toggleVisibility: true,
          background: '#f9f9f9',
          border: { width: 1, color: '#e0e0e0' },
          padding: 10,
          textStyle: {
            size: '12px',
            fontFamily: 'Segoe UI'
          }
        }}
        tooltip={{
          enable: true,
          format: '${point.x}: <b>${point.y}%</b>',
          header: 'Market Share',
          border: { width: 1, color: '#0078d4' }
        }}
        load={onLoad}
        pointClick={onPointClick}
        pointRender={onPointRender}
        loaded={(args) => {
          console.log('Chart rendering completed');
        }}
        beforeExport={(args) => {
          console.log('Exporting as', args.type);
        }}
        afterExport={(args) => {
          console.log('Export completed');
        }}
      >
        <Inject services={[
          PieSeries,
          AccumulationLegend,
          AccumulationTooltip,
          AccumulationDataLabel,
          AccumulationSelection,
          AccumulationHighlight,
          AccumulationAnnotation,
          Export
        ]} />
        
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='browser'
            yName='share'
            type='Pie'
            radius='90%'
            innerRadius='0%'
            startAngle={0}
            endAngle={360}
            explode={false}
            explodeOffset='10%'
            explodeIndex={0}
            pointColorMapping='fill'
            border={{ width: 2, color: '#ffffff' }}
            borderRadius={4}
            opacity={0.95}
            dataLabel={{
              visible: true,
              position: 'Outside',
              name: 'browser',
              format: '{point.x}: {point.y}%',
              font: {
                size: '11px',
                fontFamily: 'Segoe UI',
                fontWeight: '500'
              },
              connectorStyle: {
                type: 'Curve',
                length: '40px',
                width: 2,
                color: '#0078d4'
              }
            }}
            animation={{
              enable: true,
              duration: 1000,
              delay: 0
            }}
          />
        </AccumulationSeriesCollectionDirective>

        <AccumulationAnnotationsDirective>
          <AccumulationAnnotationDirective
            content='<div style="font-size:14px;font-weight:bold;color:#666;">100M Users</div>'
            region='Series'
            x='50%'
            y='50%'
          />
        </AccumulationAnnotationsDirective>
      </AccumulationChartComponent>
    </div>
  );
}

Doughnut Chart Example

function DoughnutChartExample() {
  const data = [
    { category: 'Mobile', value: 55 },
    { category: 'Desktop', value: 30 },
    { category: 'Tablet', value: 15 }
  ];

  return (
    <AccumulationChartComponent
      id='doughnut-chart'
      title='Device Distribution'
      legendSettings={{ visible: true, position: 'Bottom' }}
      tooltip={{ enable: true }}
      enableSmartLabels={true}
    >
      <Inject services={[
        PieSeries,
        AccumulationLegend,
        AccumulationTooltip,
        AccumulationDataLabel
      ]} />
      
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='category'
          yName='value'
          type='Pie'
          radius='90%'
          innerRadius='50%'  // Doughnut hole
          dataLabel={{
            visible: true,
            position: 'Inside',
            font: { color: 'white', fontWeight: 'bold' }
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Funnel Chart Example

import { FunnelSeries } from '@syncfusion/ej2-react-charts';

function FunnelChartExample() {
  const salesData = [
    { stage: 'Website Visits', count: 10000 },
    { stage: 'Sign Ups', count: 5000 },
    { stage: 'Active Users', count: 3000 },
    { stage: 'Premium Users', count: 1500 },
    { stage: 'Retained', count: 1200 }
  ];

  return (
    <AccumulationChartComponent
      id='funnel-chart'
      title='Sales Conversion Funnel'
      legendSettings={{ visible: false }}
      tooltip={{ enable: true }}
    >
      <Inject services={[
        FunnelSeries,
        AccumulationTooltip,
        AccumulationDataLabel
      ]} />
      
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={salesData}
          xName='stage'
          yName='count'
          type='Funnel'
          width='60%'
          height='80%'
          neckWidth='25%'
          neckHeight='5%'
          gapRatio={0.08}
          dataLabel={{
            visible: true,
            position: 'Outside',
            connectorStyle: { length: '30px' }
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Pyramid Chart Example

import { PyramidSeries } from '@syncfusion/ej2-react-charts';

function PyramidChartExample() {
  const data = [
    { level: 'Executive', count: 10 },
    { level: 'Management', count: 50 },
    { level: 'Supervisors', count: 200 },
    { level: 'Employees', count: 1000 }
  ];

  return (
    <AccumulationChartComponent
      id='pyramid-chart'
      title='Organizational Hierarchy'
      legendSettings={{ visible: true }}
      tooltip={{ enable: true }}
    >
      <Inject services={[
        PyramidSeries,
        AccumulationLegend,
        AccumulationTooltip,
        AccumulationDataLabel
      ]} />
      
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='level'
          yName='count'
          type='Pyramid'
          width='70%'
          height='85%'
          pyramidMode='Linear'
          gapRatio={0.05}
          dataLabel={{
            visible: true,
            position: 'Inside',
            font: { color: 'white', size: '12px' }
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

---

Event Arguments Interfaces

IAccLoadedEventArgs

interface IAccLoadedEventArgs {
  cancel: boolean;
  name: string;
  accumulation: AccumulationChart;
}

IAccPointRenderEventArgs

interface IAccPointRenderEventArgs {
  cancel: boolean;
  name: string;
  series: AccumulationSeries;
  point: AccumulationPoints;
  fill: string;
  border: BorderModel;
  data: Object;
}

IAccSeriesRenderEventArgs

interface IAccSeriesRenderEventArgs {
  cancel: boolean;
  name: string;
  series: AccumulationSeries;
  data: Object;
}

IAccTextRenderEventArgs

interface IAccTextRenderEventArgs {
  cancel: boolean;
  name: string;
  series: AccumulationSeries;
  point: AccumulationPoints;
  text: string | string[];
  border: BorderModel;
  color: string;
  template: string | Function;
  font: FontModel;
}

IPointEventArgs

interface IPointEventArgs {
  cancel: boolean;
  name: string;
  series: AccumulationSeries;
  point: AccumulationPoints;
  seriesIndex: number;
  pointIndex: number;
  x: number;
  y: number;
}

IAccLegendClickEventArgs

interface IAccLegendClickEventArgs {
  cancel: boolean;
  name: string;
  legendText: string;
  legendShape: LegendShape;
  series: AccumulationSeries;
  point: AccumulationPoints;
  seriesIndex: number;
  pointIndex: number;
}

---

Official API Documentation

For the most up-to-date and complete API reference, visit:

• AccumulationChartComponent API: https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/
• AccumulationSeriesModel API: https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationseriesmodel
• Complete Index: https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/index-default

---

Quick Reference Checklist

When using Syncfusion React Accumulation Charts, ensure you:

✅ Import required modules (AccumulationChartComponent, AccumulationSeriesDirective, etc.) ✅ Inject necessary services (PieSeries, AccumulationLegend, AccumulationTooltip, etc.) ✅ Set unique id on AccumulationChartComponent ✅ Map data with dataSource, xName, and yName ✅ Specify series type ('Pie', 'Funnel', or 'Pyramid') ✅ Configure radius and innerRadius for pie/doughnut ✅ Enable features via settings (tooltip, legend, dataLabel, etc.) ✅ Add event handlers for interactions (pointClick, pointRender, etc.) ✅ Use enableSmartLabels={true} for charts with many slices ✅ Inject Export module if using export/print functionality

---

Selection Patterns Reference

Available patterns for selectionPattern and highlightPattern:

• None - No pattern
• Chessboard - Chessboard pattern
• Dots - Dot pattern
• DiagonalForward - Forward diagonal lines
• DiagonalBackward - Backward diagonal lines
• Crosshatch - Crosshatch pattern
• Pacman - Pacman pattern
• Grid - Grid pattern
• Turquoise - Turquoise pattern
• Star - Star pattern
• Triangle - Triangle pattern
• Circle - Circle pattern
• Tile - Tile pattern
• HorizontalDash - Horizontal dashes
• VerticalDash - Vertical dashes
• Rectangle - Rectangle pattern
• Box - Box pattern
• VerticalStripe - Vertical stripes
• HorizontalStripe - Horizontal stripes
• Bubble - Bubble pattern

---

Themes Reference

Available themes for theme property:

• Material - Google Material Design
• Material3 - Material Design 3
• MaterialDark - Material Dark
• Material3Dark - Material 3 Dark
• Fabric - Microsoft Fabric
• FabricDark - Microsoft Fabric Dark
• Bootstrap - Bootstrap 3
• BootstrapDark - Bootstrap 3 Dark
• Bootstrap4 - Bootstrap 4
• Bootstrap5 - Bootstrap 5
• Bootstrap5Dark - Bootstrap 5 Dark
• Tailwind - Tailwind CSS
• TailwindDark - Tailwind CSS Dark
• Tailwind3 - Tailwind CSS 3
• Tailwind3Dark - Tailwind CSS 3 Dark
• Fluent - Microsoft Fluent
• FluentDark - Microsoft Fluent Dark
• Fluent2 - Microsoft Fluent 2
• Fluent2Dark - Microsoft Fluent 2 Dark
• Fluent2HighContrast - Fluent 2 High Contrast
• HighContrast - High Contrast
• HighContrastLight - High Contrast Light

---

Export Types Reference

Available export types for export() method:

• 'PNG' - Portable Network Graphics (recommended for web)
• 'JPEG' - JPEG format (smaller file size)
• 'SVG' - Scalable Vector Graphics (perfect quality at any size)
• 'PDF' - Portable Document Format (for reports and printing)

---

Common Gotchas and Tips

1. Doughnut vs Pie

// Pie chart
<AccumulationSeriesDirective innerRadius='0%' />

// Doughnut chart
<AccumulationSeriesDirective innerRadius='40%' />

2. Data Label Position

// Inside labels (good for large slices)
dataLabel={{ visible: true, position: 'Inside' }}

// Outside labels (better for many small slices)
dataLabel={{ visible: true, position: 'Outside' }}

3. Smart Labels

// Always enable for charts with 8+ slices
<AccumulationChartComponent enableSmartLabels={true}>

4. Grouping Small Values

// Group values below 5
<AccumulationSeriesDirective
  groupTo='5'
  groupMode='Value'
/>

// Group to show only top 4 items
<AccumulationSeriesDirective
  groupTo='4'
  groupMode='Point'
/>

5. Export Requires Module

// Don't forget to inject Export module
<Inject services={[PieSeries, Export]} />

6. TypeScript Typing

import { AccumulationChartComponent } from '@syncfusion/ej2-react-charts';

const chartRef = useRef<AccumulationChartComponent>(null);

---

This comprehensive API reference should cover all your Accumulation Chart needs! 🎉

````

Appearance and Theming

Table of Contents

• Overview
• Built-in Themes
• Custom Themes
• Gradient Effects
• Chart Export and Printing
• Responsive Design
• Dynamic Updates
• Animation Settings

Overview

Appearance and theming customize the visual presentation of accumulation charts, from built-in themes to gradients, printing, and dynamic updates.

Built-in Themes

Apply Syncfusion's built-in themes by importing the corresponding CSS:

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

function ThemedChart() {
  const data = [
    { x: 'Chrome', y: 61.3 },
    { x: 'Safari', y: 24.6 },
    { x: 'Firefox', y: 14.1 }
  ];

  return (
    <AccumulationChartComponent theme='Material' id='themed-chart'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Available themes:

• Material
• Material 3
• Bootstrap 5
• Bootstrap 4
• Tailwind CSS
• Fluent
• Fabric (Microsoft)
• High Contrast

Custom Themes

Create custom themes by defining color palettes and styles:

function CustomThemedChart() {
  const data = [
    { x: 'Product A', y: 45 },
    { x: 'Product B', y: 30 },
    { x: 'Product C', y: 25 }
  ];

  // Custom color palette
  const customPalette = [
    '#667eea',
    '#764ba2',
    '#f093fb',
    '#4facfe'
  ];

  return (
    <AccumulationChartComponent 
      id='custom-theme'
      background='#f8f9fa'
      palettes={customPalette}
      titleStyle={{
        fontFamily: 'Segoe UI, sans-serif',
        size: '18px',
        fontWeight: '600',
        color: '#333333'
      }}
      margin={{ left: 20, right: 20, top: 30, bottom: 20 }}
      border={{ width: 0 }}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          border={{ width: 2, color: '#ffffff' }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Complete theme object:

function FullCustomTheme() {
  const data = [
    { x: 'Q1', y: 35 },
    { x: 'Q2', y: 28 },
    { x: 'Q3', y: 42 },
    { x: 'Q4', y: 31 }
  ];

  const darkTheme = {
    background: '#1e1e1e',
    palette: ['#00d4ff', '#00ff88', '#ffaa00', '#ff0066'],
    title: {
      fontFamily: 'Consolas, monospace',
      size: '20px',
      fontWeight: 'bold',
      color: '#ffffff'
    },
    border: {
      width: 1,
      color: '#444444'
    }
  };

  return (
    <AccumulationChartComponent 
      id='full-custom-theme'
      title='Quarterly Sales - Dark Theme'
      background={darkTheme.background}
      palettes={darkTheme.palette}
      titleStyle={darkTheme.title}
      border={darkTheme.border}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          border={{ width: 2, color: '#000000' }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Gradient Effects

Apply gradient fills to slices using pointRender event:

import { IAccPointRenderEventArgs } from '@syncfusion/ej2-react-charts';

function GradientChart() {
  const data = [
    { x: 'Chrome', y: 61.3 },
    { x: 'Safari', y: 24.6 },
    { x: 'Firefox', y: 14.1 }
  ];

  const gradients = [
    'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  ];

  const onPointRender = (args: IAccPointRenderEventArgs): void => {
    args.fill = gradients[args.point.index % gradients.length];
  };

  return (
    <AccumulationChartComponent 
      id='gradient-chart'
      pointRender={onPointRender}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

SVG gradient fills:

function SVGGradientChart() {
  const data = [
    { x: 'Product A', y: 45 },
    { x: 'Product B', y: 30 },
    { x: 'Product C', y: 25 }
  ];

  const onPointRender = (args: IAccPointRenderEventArgs): void => {
    args.fill = `url(#gradient${args.point.index})`;
  };

  return (
    <div>
      <svg width="0" height="0">
        <defs>
          <linearGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style={{ stopColor: '#667eea', stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: '#764ba2', stopOpacity: 1 }} />
          </linearGradient>
          <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style={{ stopColor: '#f093fb', stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: '#f5576c', stopOpacity: 1 }} />
          </linearGradient>
          <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style={{ stopColor: '#4facfe', stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: '#00f2fe', stopOpacity: 1 }} />
          </linearGradient>
        </defs>
      </svg>

      <AccumulationChartComponent 
        id='svg-gradient'
        pointRender={onPointRender}
      >
        <Inject services={[PieSeries]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='x'
            yName='y'
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>
    </div>
  );
}

Theme Customization

Available themes (18+ including dark & high contrast):

• Material, MaterialDark, Material3, Material3Dark
• Fabric, FabricDark
• Bootstrap, BootstrapDark, Bootstrap4, Bootstrap5, Bootstrap5Dark, Bootstrap5.3, Bootstrap5.3Dark
• Tailwind, TailwindDark
• Fluent, FluentDark, Fluent2, Fluent2Dark, Fluent2HighContrast
• HighContrast, HighContrastLight

Switch via the theme prop:

<AccumulationChartComponent theme='Material3Dark'>
  {/* chart content */}
</AccumulationChartComponent>

## Chart Export and Printing

Export charts as images or PDF, or print directly:

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

function ExportPrintChart() { const chartRef = React.useRef<AccumulationChartComponent>(null);

const data = [ { x: 'Chrome', y: 61.3 }, { x: 'Safari', y: 24.6 }, { x: 'Firefox', y: 14.1 } ];

const exportChart = (type: 'PNG' | 'JPEG' | 'SVG' | 'PDF') => { if (chartRef.current) { chartRef.current.export(type, 'chart-export'); } };

const printChart = () => { if (chartRef.current) { chartRef.current.print(); } };

return ( <div> <div style={{ marginBottom: '10px' }}> <button onClick={() => exportChart('PNG')}>Export as PNG</button> <button onClick={() => exportChart('JPEG')}>Export as JPEG</button> <button onClick={() => exportChart('SVG')}>Export as SVG</button> <button onClick={() => exportChart('PDF')}>Export as PDF</button> <button onClick={printChart}>Print Chart</button> </div>

<AccumulationChartComponent id='export-print-chart' ref={chartRef} title='Browser Market Share' > <Inject services={[PieSeries, AccumulationDataLabel]} /> <AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{ visible: true }} /> </AccumulationSeriesCollectionDirective> </AccumulationChartComponent> </div> ); }

## Responsive Design

Make charts responsive to container size changes:

function ResponsiveChart() { const data = [ { x: 'Mobile', y: 55 }, { x: 'Desktop', y: 30 }, { x: 'Tablet', y: 15 } ];

return ( <div style={{ width: '100%', height: '400px' }}> <AccumulationChartComponent id='responsive-chart' width='100%' height='100%' > <Inject services={[PieSeries]} /> <AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' radius='80%' /> </AccumulationSeriesCollectionDirective> </AccumulationChartComponent> </div> ); }

**Responsive with breakpoints:**

function ResponsiveBreakpoints() { const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);

React.useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768); };

window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []);

const data = [ { x: 'Category A', y: 35 }, { x: 'Category B', y: 28 }, { x: 'Category C', y: 22 }, { x: 'Category D', y: 15 } ];

return ( <AccumulationChartComponent id='responsive-breakpoints' width='100%' height={isMobile ? '300px' : '450px'} > <Inject services={[PieSeries]} /> <AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' radius={isMobile ? '70%' : '85%'} innerRadius={isMobile ? '0%' : '40%'} /> </AccumulationSeriesCollectionDirective> </AccumulationChartComponent> ); }

## Dynamic Updates

Update chart data and appearance dynamically:

function DynamicUpdates() { const [data, setData] = React.useState([ { x: 'Product A', y: 45 }, { x: 'Product B', y: 30 }, { x: 'Product C', y: 25 } ]);

const [theme, setTheme] = React.useState('light');

const refreshData = () => { setData([ { x: 'Product A', y: Math.floor(Math.random() 50) + 20 }, { x: 'Product B', y: Math.floor(Math.random() 50) + 20 }, { x: 'Product C', y: Math.floor(Math.random() * 50) + 20 } ]); };

const toggleTheme = () => { setTheme(theme === 'light' ? 'dark' : 'light'); };

const lightPalette = ['#667eea', '#764ba2', '#f093fb']; const darkPalette = ['#00d4ff', '#00ff88', '#ffaa00'];

return ( <div> <div style={{ marginBottom: '10px' }}> <button onClick={refreshData}>Refresh Data</button> <button onClick={toggleTheme}>Toggle Theme</button> </div>

<AccumulationChartComponent id='dynamic-updates' background={theme === 'light' ? '#ffffff' : '#1e1e1e'} palettes={theme === 'light' ? lightPalette : darkPalette} titleStyle={{ color: theme === 'light' ? '#333' : '#fff' }} > <Inject services={[PieSeries]} /> <AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' animation={{ enable: true, duration: 800 }} /> </AccumulationSeriesCollectionDirective> </AccumulationChartComponent> </div> ); }

## Animation Settings

Control chart animations:

function AnimationSettings() { const data = [ { x: 'Jan', y: 35 }, { x: 'Feb', y: 28 }, { x: 'Mar', y: 34 } ];

return ( <AccumulationChartComponent id='animation-settings' enableAnimation={true} > <Inject services={[PieSeries]} /> <AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' animation={{ enable: true, duration: 1200, // Animation duration in ms delay: 0 // Delay before animation starts }} /> </AccumulationSeriesCollectionDirective> </AccumulationChartComponent> ); }

**Disable animations:**

function NoAnimation() { const data = [ { x: 'A', y: 25 }, { x: 'B', y: 35 }, { x: 'C', y: 40 } ];

return ( <AccumulationChartComponent id='no-animation' enableAnimation={false} > <Inject services={[PieSeries]} /> <AccumulationSeriesCollectionDirective> <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' animation={{ enable: false }} /> </AccumulationSeriesCollectionDirective> </AccumulationChartComponent> ); }

**Advanced Animation:**

Data label templates and dynamic updates (`addPoint`, `removePoint`, `setData`) also respect animation settings. Labels are hidden during animation and revealed after `animationComplete` event.

<AccumulationChartComponent enableAnimation={true} animationComplete={(args) => { console.log('Animation completed for', args.series.name); }}> {/ series with animation enabled /} </AccumulationChartComponent>

## Common Issues and Solutions

**Issue: Theme CSS not applied**
- Solution: Ensure theme CSS is imported in main App.tsx or index.tsx
- Solution: Import both base and charts theme files
- Solution: Check CSS import order (base before component)

**Issue: Custom colors not showing**
- Solution: Verify palettes array has enough colors
- Solution: Check pointColorMapping if using data-based colors
- Solution: Ensure colors use valid CSS color values

**Issue: Gradients not rendering**
- Solution: Use SVG gradients defined in defs
- Solution: Apply gradients via pointRender event
- Solution: Check browser compatibility for gradient syntax

**Issue: Export not working**
- Solution: Ensure chart reference is properly set
- Solution: Call export method after chart is fully rendered
- Solution: Check browser console for errors

**Issue: Chart not responsive**
- Solution: Set width='100%' and height='100%'
- Solution: Ensure parent container has defined dimensions
- Solution: Use percentage-based radius values

**Issue: Animation lagging**
- Solution: Reduce animation duration
- Solution: Disable animation for large datasets
- Solution: Optimize data point count

Customization

Table of Contents

• Overview
• Point Colors
• Border Customization
• Pattern Fills
• Conditional Styling with pointRender
• Series Customization
• Exploding Slices
• Chart Background and Margins
• Font and Text Styling

Overview

Customization options allow you to control colors, borders, patterns, and visual styles to match your application's design system or highlight specific data points.

Point Colors

Customize individual point colors using color mapping or inline styles:

Method 1: Color Mapping from Data

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

function ColorMapping() {
  const data = [
    { x: 'Chrome', y: 61.3, fill: '#4285F4' },
    { x: 'Safari', y: 24.6, fill: '#0088FF' },
    { x: 'Firefox', y: 14.1, fill: '#FF6600' }
  ];

  return (
    <AccumulationChartComponent id='color-mapped'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          pointColorMapping='fill'  // Map 'fill' field to colors
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Method 2: Palette Colors

function PaletteColors() {
  const data = [
    { x: 'Product A', y: 35 },
    { x: 'Product B', y: 28 },
    { x: 'Product C', y: 22 },
    { x: 'Product D', y: 15 }
  ];

  const customPalette = ['#667eea', '#764ba2', '#f093fb', '#4facfe'];

  return (
    <AccumulationChartComponent 
      id='palette-colors'
      palettes={customPalette}  // Custom color palette
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Border Customization

Customize slice borders using the border property:

function BorderCustomization() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 }
  ];

  return (
    <AccumulationChartComponent id='border-custom'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          border={{
            width: 3,
            color: '#ffffff'  // White borders between slices
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Border properties:

• width: Border thickness (pixels)
• color: Border color (hex, rgb, name)

Example with varied borders:

function VariedBorders() {
  const data = [
    { x: 'Success', y: 45, fill: '#28a745', borderColor: '#1e7e34', borderWidth: 2 },
    { x: 'Warning', y: 30, fill: '#ffc107', borderColor: '#e0a800', borderWidth: 2 },
    { x: 'Error', y: 25, fill: '#dc3545', borderColor: '#bd2130', borderWidth: 2 }
  ];

  const onPointRender = (args: any) => {
    args.border.width = args.data.borderWidth;
    args.border.color = args.data.borderColor;
  };

  return (
    <AccumulationChartComponent 
      id='varied-borders'
      pointRender={onPointRender}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          pointColorMapping='fill'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Pattern Fills

Apply pattern fills to slices for printing or accessibility:

function PatternFills() {
  const data = [
    { x: 'Category A', y: 35 },
    { x: 'Category B', y: 28 },
    { x: 'Category C', y: 22 }
  ];

  const onPointRender = (args: any) => {
    const patterns = [
      'url(#pattern1)',  // Dots
      'url(#pattern2)',  // Stripes
      'url(#pattern3)'   // Grid
    ];
    args.fill = patterns[args.point.index];
  };

  return (
    <div>
      <svg width="0" height="0">
        <defs>
          <pattern id="pattern1" patternUnits="userSpaceOnUse" width="8" height="8">
            <circle cx="4" cy="4" r="2" fill="#667eea" />
          </pattern>
          <pattern id="pattern2" patternUnits="userSpaceOnUse" width="8" height="8">
            <path d="M 0,0 l 8,8" stroke="#764ba2" strokeWidth="2" />
          </pattern>
          <pattern id="pattern3" patternUnits="userSpaceOnUse" width="10" height="10">
            <rect width="10" height="10" fill="none" stroke="#f093fb" strokeWidth="1" />
          </pattern>
        </defs>
      </svg>

      <AccumulationChartComponent 
        id='pattern-fills'
        pointRender={onPointRender}
      >
        <Inject services={[PieSeries]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='x'
            yName='y'
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>
    </div>
  );
}

Conditional Styling with pointRender

Apply dynamic styling based on data values:

import { IAccPointRenderEventArgs } from '@syncfusion/ej2-react-charts';

function ConditionalStyling() {
  const data = [
    { x: 'Q1', y: 7, target: 10 },
    { x: 'Q2', y: 15, target: 12 },
    { x: 'Q3', y: 21, target: 20 },
    { x: 'Q4', y: 18, target: 22 }
  ];

  const onPointRender = (args: IAccPointRenderEventArgs): void => {
    const point = args.data as any;
    
    // Color based on target achievement
    if (point.y >= point.target) {
      args.fill = '#28a745';  // Green for success
      args.border = { width: 2, color: '#1e7e34' };
    } else {
      args.fill = '#dc3545';  // Red for below target
      args.border = { width: 2, color: '#bd2130' };
    }
  };

  return (
    <AccumulationChartComponent 
      id='conditional-styling'
      title='Quarterly Performance vs Target'
      pointRender={onPointRender}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Advanced conditional styling:

function AdvancedConditionalStyling() {
  const data = [
    { x: 'Product A', y: 45, category: 'premium' },
    { x: 'Product B', y: 30, category: 'standard' },
    { x: 'Product C', y: 25, category: 'budget' }
  ];

  const onPointRender = (args: IAccPointRenderEventArgs): void => {
    const point = args.data as any;
    
    const categoryStyles: any = {
      premium: { 
        fill: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        borderWidth: 3,
        borderColor: '#764ba2'
      },
      standard: { 
        fill: '#4facfe',
        borderWidth: 2,
        borderColor: '#00c6ff'
      },
      budget: { 
        fill: '#43e97b',
        borderWidth: 1,
        borderColor: '#38f9d7'
      }
    };

    const style = categoryStyles[point.category];
    if (style) {
      args.fill = style.fill;
      args.border = { 
        width: style.borderWidth, 
        color: style.borderColor 
      };
    }
  };

  return (
    <AccumulationChartComponent 
      id='advanced-conditional'
      pointRender={onPointRender}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Series Customization

Customize series-level properties:

function SeriesCustomization() {
  const data = [
    { x: 'Chrome', y: 61.3 },
    { x: 'Safari', y: 24.6 },
    { x: 'Firefox', y: 14.1 }
  ];

  return (
    <AccumulationChartComponent id='series-custom'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          radius='90%'               // Slice radius
          innerRadius='40%'          // Doughnut inner radius
          startAngle={0}             // Starting angle
          endAngle={360}             // Ending angle
          opacity={0.9}              // Transparency
          animation={{ enable: true, duration: 1000 }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Exploding Slices

Emphasize specific slices by separating them from the chart:

function ExplodingSlices() {
  const data = [
    { x: 'Chrome', y: 61.3, explode: true },  // Explode this slice
    { x: 'Safari', y: 24.6, explode: false },
    { x: 'Firefox', y: 14.1, explode: false }
  ];

  return (
    <AccumulationChartComponent id='exploding-slices'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          explode={true}            // Enable explode feature
          explodeOffset='10%'       // Distance to separate
          explodeIndex={0}          // Index of slice to explode
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Explode all slices:

function ExplodeAll() {
  const data = [
    { x: 'A', y: 25 },
    { x: 'B', y: 25 },
    { x: 'C', y: 25 },
    { x: 'D', y: 25 }
  ];

  return (
    <AccumulationChartComponent id='explode-all'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          explode={true}
          explodeAll={true}         // Explode all slices
          explodeOffset='5%'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Chart Background and Margins

Customize chart container appearance:

function BackgroundAndMargins() {
  const data = [
    { x: 'Product A', y: 45 },
    { x: 'Product B', y: 30 },
    { x: 'Product C', y: 25 }
  ];

  return (
    <AccumulationChartComponent 
      id='background-custom'
      background='#f5f5f5'           // Chart background
      margin={{ left: 20, right: 20, top: 20, bottom: 20 }}
      border={{ width: 2, color: '#e0e0e0' }}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Font and Text Styling

Customize text elements throughout the chart:

function FontStyling() {
  const data = [
    { x: 'Chrome', y: 61.3 },
    { x: 'Safari', y: 24.6 },
    { x: 'Firefox', y: 14.1 }
  ];

  return (
    <AccumulationChartComponent 
      id='font-styling'
      title='Browser Market Share'
      titleStyle={{
        fontFamily: 'Segoe UI',
        size: '18px',
        fontWeight: '600',
        color: '#333'
      }}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Complete customization example:

function FullyCustomizedChart() {
  const data = [
    { x: 'Chrome', y: 61.3, fill: '#4285F4' },
    { x: 'Safari', y: 24.6, fill: '#0088FF' },
    { x: 'Firefox', y: 14.1, fill: '#FF6600' }
  ];

  const onPointRender = (args: IAccPointRenderEventArgs): void => {
    // Add subtle shadow effect
    args.border = { width: 2, color: '#ffffff' };
  };

  return (
    <AccumulationChartComponent 
      id='fully-customized'
      title='Browser Statistics 2024'
      titleStyle={{
        fontFamily: 'Segoe UI',
        size: '20px',
        fontWeight: 'bold',
        color: '#333'
      }}
      background='linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
      margin={{ left: 30, right: 30, top: 40, bottom: 30 }}
      pointRender={onPointRender}
    >
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          pointColorMapping='fill'
          radius='85%'
          opacity={0.95}
          animation={{ enable: true, duration: 1200 }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Selection and Highlighting

Enable point selection and highlighting for interactive charts:

Selection Mode:

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

function SelectionExample() {
  const data = [
    { x: 'Chrome', y: 61.3 },
    { x: 'Safari', y: 24.6 },
    { x: 'Firefox', y: 14.1 },
    { x: 'Edge', y: 5.0 }
  ];

  const onSelectionComplete = (args: any) => {
    console.log('Selected point:', args);
  };

  return (
    <AccumulationChartComponent 
      id='selection-chart'
      selectionMode='Point'  // Enable point selection
      isMultiSelect={false}  // Single selection only
      selectedDataIndexes={[{ series: 0, point: 0 }]}  // Pre-select first point
      selectionPattern='DiagonalForward'  // Pattern for selected points
      selectionComplete={onSelectionComplete}
    >
      <Inject services={[PieSeries, AccumulationSelection]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Highlight Mode:

import { AccumulationHighlight } from '@syncfusion/ej2-react-charts';

function HighlightExample() {
  const data = [
    { x: 'Product A', y: 45 },
    { x: 'Product B', y: 30 },
    { x: 'Product C', y: 25 }
  ];

  return (
    <AccumulationChartComponent 
      id='highlight-chart'
      highlightMode='Point'  // Enable point highlighting on hover
      highlightColor='#ff4081'  // Custom highlight color
      highlightPattern='Dots'  // Pattern for highlighted points
    >
      <Inject services={[PieSeries, AccumulationHighlight]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Multi-Select:

function MultiSelectExample() {
  const [selectedPoints, setSelectedPoints] = React.useState<any[]>([]);
  
  const data = [
    { x: 'Q1', y: 35 },
    { x: 'Q2', y: 28 },
    { x: 'Q3', y: 42 },
    { x: 'Q4', y: 31 }
  ];

  const onPointClick = (args: any) => {
    const pointInfo = `${args.point.x}: ${args.point.y}`;
    setSelectedPoints(prev => 
      prev.includes(pointInfo) 
        ? prev.filter(p => p !== pointInfo)
        : [...prev, pointInfo]
    );
  };

  return (
    <div>
      <div style={{ marginBottom: '10px' }}>
        <strong>Selected Points:</strong> {
          selectedPoints.length > 0 
            ? selectedPoints.join(', ') 
            : 'None'
        }
      </div>

      <AccumulationChartComponent 
        id='multi-select'
        selectionMode='Point'
        isMultiSelect={true}  // Enable multiple selection
        pointClick={onPointClick}
      >
        <Inject services={[PieSeries, AccumulationSelection]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='x'
            yName='y'
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>
    </div>
  );
}

SelectionComplete Event

Capture selection changes using the selectionComplete event:

import { IAccSelectionCompleteEventArgs } from '@syncfusion/ej2-react-charts';

function SelectionCompleteExample() {
  const [selectedItems, setSelectedItems] = React.useState<string[]>([]);

  const onSelectionComplete = (args: IAccSelectionCompleteEventArgs): void => {
    const selected = args.selectedDataValues.map(item => 
      `${item.x}: ${item.y}`
    );
    setSelectedItems(selected);
  };

  return (
    <div>
      <AccumulationChartComponent 
        id='selection-complete'
        selectionMode='Point'
        isMultiSelect={true}
        selectionComplete={onSelectionComplete}
      >
        <Inject services={[PieSeries, AccumulationSelection]} />
        <AccumulationSeriesCollectionDirective>
          {/* your series */}
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>

      {selectedItems.length > 0 && (
        <div style={{ marginTop: '15px' }}>
          <strong>Selected:</strong> {selectedItems.join(', ')}
        </div>
      )}
    </div>
  );
}

When to use: Track user selections for filtering, drill-down, or analytics.

Common Issues and Solutions

Issue: Custom colors not applying

• Solution: Ensure pointColorMapping property points to correct field
• Solution: Verify data has fill/color field with valid color values
• Solution: Check that palette array has enough colors for all points

Issue: Border not visible

• Solution: Increase border.width value
• Solution: Use contrasting color for border
• Solution: Check if slice colors are too similar to border

Issue: Exploded slice not separating

• Solution: Verify explode: true is set on series
• Solution: Increase explodeOffset value ('10%', '15%')
• Solution: Check explodeIndex matches intended slice

Issue: pointRender changes not applying

• Solution: Ensure event handler is properly attached
• Solution: Verify args properties are being modified correctly
• Solution: Check that changes don't conflict with other settings

Issue: Gradient fills not working

• Solution: Use SVG patterns or pointRender for complex fills
• Solution: Verify gradient syntax is correct
• Solution: Consider using solid colors for better browser compatibility

Empty Points

Overview

Empty points represent null, undefined, or missing data values in the chart. Syncfusion provides multiple modes to handle these gracefully without breaking the visualization.

Handling Empty Points

Configure empty point handling using the emptyPointSettings property:

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

function EmptyPointHandling() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: null },  // Empty point
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: undefined },  // Empty point
    { x: 'May', y: 28 }
  ];

  return (
    <AccumulationChartComponent id='empty-points'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          emptyPointSettings={{
            mode: 'Drop'  // Skip empty points
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Empty Point Modes

Control how empty points are rendered using the mode property:

Drop Mode (Default): Removes empty points from the chart entirely.

function DropMode() {
  const data = [
    { x: 'Product A', y: 45 },
    { x: 'Product B', y: null },
    { x: 'Product C', y: 30 },
    { x: 'Product D', y: 25 }
  ];

  return (
    <AccumulationChartComponent id='drop-mode'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          emptyPointSettings={{
            mode: 'Drop'  // Product B will not appear
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Zero Mode: Treats empty points as zero values.

function ZeroMode() {
  const data = [
    { x: 'Q1', y: 35 },
    { x: 'Q2', y: null },  // Treated as 0
    { x: 'Q3', y: 42 },
    { x: 'Q4', y: 31 }
  ];

  return (
    <AccumulationChartComponent id='zero-mode'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          emptyPointSettings={{
            mode: 'Zero'  // Q2 shows as 0
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Average Mode: Replaces empty points with the average of adjacent points.

function AverageMode() {
  const data = [
    { x: 'Week 1', y: 20 },
    { x: 'Week 2', y: null },  // Will be (20 + 30) / 2 = 25
    { x: 'Week 3', y: 30 },
    { x: 'Week 4', y: null },  // Will be (30 + 28) / 2 = 29
    { x: 'Week 5', y: 28 }
  ];

  return (
    <AccumulationChartComponent id='average-mode'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          emptyPointSettings={{
            mode: 'Average'  // Interpolate empty values
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Mode Comparison

Compare different empty point handling strategies:

function ModeComparison() {
  const data = [
    { x: 'A', y: 25 },
    { x: 'B', y: null },
    { x: 'C', y: 35 },
    { x: 'D', y: null },
    { x: 'E', y: 20 }
  ];

  return (
    <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
      <div>
        <h3>Drop Mode</h3>
        <AccumulationChartComponent id='compare-drop' width='300'>
          <Inject services={[PieSeries]} />
          <AccumulationSeriesCollectionDirective>
            <AccumulationSeriesDirective
              dataSource={data}
              xName='x'
              yName='y'
              emptyPointSettings={{ mode: 'Drop' }}
            />
          </AccumulationSeriesCollectionDirective>
        </AccumulationChartComponent>
      </div>

      <div>
        <h3>Zero Mode</h3>
        <AccumulationChartComponent id='compare-zero' width='300'>
          <Inject services={[PieSeries]} />
          <AccumulationSeriesCollectionDirective>
            <AccumulationSeriesDirective
              dataSource={data}
              xName='x'
              yName='y'
              emptyPointSettings={{ mode: 'Zero' }}
            />
          </AccumulationSeriesCollectionDirective>
        </AccumulationChartComponent>
      </div>

      <div>
        <h3>Average Mode</h3>
        <AccumulationChartComponent id='compare-avg' width='300'>
          <Inject services={[PieSeries]} />
          <AccumulationSeriesCollectionDirective>
            <AccumulationSeriesDirective
              dataSource={data}
              xName='x'
              yName='y'
              emptyPointSettings={{ mode: 'Average' }}
            />
          </AccumulationSeriesCollectionDirective>
        </AccumulationChartComponent>
      </div>
    </div>
  );
}

Styling Empty Points

Customize the appearance of empty points with distinct styling:

function StyledEmptyPoints() {
  const data = [
    { x: 'Complete', y: 45 },
    { x: 'No Data', y: null },
    { x: 'In Progress', y: 30 },
    { x: 'Missing', y: undefined },
    { x: 'Done', y: 25 }
  ];

  return (
    <AccumulationChartComponent id='styled-empty'>
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName='x'
          yName='y'
          emptyPointSettings={{
            mode: 'Zero',
            fill: '#e0e0e0',  // Gray for empty points
            border: {
              width: 2,
              color: '#999999'
            }
          }}
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}

Styling properties:

• fill: Background color for empty points
• border: Border styling { width, color }

Detecting Empty Points

Identify empty points programmatically:

function DetectEmptyPoints() {
  const [emptyCount, setEmptyCount] = React.useState(0);
  
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: null },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: null },
    { x: 'May', y: 28 }
  ];

  React.useEffect(() => {
    const empties = data.filter(d => d.y === null || d.y === undefined).length;
    setEmptyCount(empties);
  }, []);

  return (
    <div>
      <div style={{ marginBottom: '10px', padding: '10px', background: '#fff3cd' }}>
        Warning: {emptyCount} data points are missing
      </div>

      <AccumulationChartComponent id='detect-empty'>
        <Inject services={[PieSeries]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='x'
            yName='y'
            emptyPointSettings={{
              mode: 'Average',
              fill: '#ffc107',
              border: { width: 2, color: '#ff9800' }
            }}
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>
    </div>
  );
}

Handling with Custom Logic

Preprocess data with custom empty point logic:

function CustomEmptyHandling() {
  const rawData = [
    { x: 'Product A', y: 45, fallback: 40 },
    { x: 'Product B', y: null, fallback: 35 },
    { x: 'Product C', y: 30, fallback: 30 },
    { x: 'Product D', y: undefined, fallback: 25 }
  ];

  // Custom preprocessing: use fallback values
  const processedData = rawData.map(item => ({
    x: item.x,
    y: item.y ?? item.fallback,  // Use fallback if null/undefined
    isEstimated: item.y === null || item.y === undefined
  }));

  const onPointRender = (args: any) => {
    if (args.data.isEstimated) {
      // Style estimated points differently
      args.fill = '#ffc107';
      args.border = { width: 2, color: '#ff9800', dashArray: '5,3' };
    }
  };

  return (
    <div>
      <div style={{ marginBottom: '10px' }}>
        <span style={{ 
          display: 'inline-block', 
          width: '20px', 
          height: '20px', 
          backgroundColor: '#ffc107',
          border: '2px dashed #ff9800',
          marginRight: '5px'
        }} />
        Estimated values
      </div>

      <AccumulationChartComponent 
        id='custom-empty'
        pointRender={onPointRender}
      >
        <Inject services={[PieSeries]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={processedData}
            xName='x'
            yName='y'
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>
    </div>
  );
}

Best Practices

When to use each mode:

Complete example with best practices:

function EmptyPointsBestPractices() {
  const [mode, setMode] = React.useState<'Drop' | 'Zero' | 'Average'>('Drop');
  
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: null },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 28 },
    { x: 'May', y: null },
    { x: 'Jun', y: 42 }
  ];

  const emptyCount = data.filter(d => d.y === null || d.y === undefined).length;

  return (
    <div>
      {emptyCount > 0 && (
        <div style={{
          padding: '10px',
          backgroundColor: '#fff3cd',
          border: '1px solid #ffc107',
          borderRadius: '4px',
          marginBottom: '15px'
        }}>
          <strong>Data Quality Notice:</strong> {emptyCount} of {data.length} data points are missing.
        </div>
      )}

      <div style={{ marginBottom: '10px' }}>
        <label>Empty Point Handling: </label>
        <select 
          value={mode} 
          onChange={(e) => setMode(e.target.value as any)}
          style={{ marginLeft: '10px', padding: '5px' }}
        >
          <option value="Drop">Drop (Remove)</option>
          <option value="Zero">Zero (Treat as 0)</option>
          <option value="Average">Average (Interpolate)</option>
        </select>
      </div>

      <AccumulationChartComponent 
        id='best-practices'
        title={`Monthly Data (${mode} mode)`}
      >
        <Inject services={[PieSeries]} />
        <AccumulationSeriesCollectionDirective>
          <AccumulationSeriesDirective
            dataSource={data}
            xName='x'
            yName='y'
            emptyPointSettings={{
              mode: mode,
              fill: mode === 'Zero' ? '#e0e0e0' : undefined,
              border: mode === 'Zero' ? { width: 2, color: '#999' } : undefined
            }}
          />
        </AccumulationSeriesCollectionDirective>
      </AccumulationChartComponent>
    </div>
  );
}

Common Issues and Solutions

Issue: Empty points breaking chart

• Solution: Enable emptyPointSettings with appropriate mode
• Solution: Validate data before rendering
• Solution: Use 'Drop' mode to skip problematic points

Issue: Zero mode making slices too small

• Solution: Use 'Drop' mode instead to remove zeros
• Solution: Group small values including zeros
• Solution: Consider if zero is meaningful for your data

Issue: Average mode producing unexpected values

• Solution: Verify adjacent values exist for calculation
• Solution: Use custom preprocessing for complex logic
• Solution: Consider 'Drop' or 'Zero' for edge cases

Issue: Can't distinguish empty from actual data

• Solution: Use custom fill color for empty points
• Solution: Add distinct border styling
• Solution: Preprocess data and mark empty points explicitly

Issue: Multiple consecutive empty points

• Solution: Average mode may not work well - use Drop or Zero
• Solution: Implement custom preprocessing logic
• Solution: Consider data quality and collection process