syncfusion-react-accumulation-chart

What this skill does

# 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](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](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](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](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](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](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](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](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](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](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](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](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](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](references/api-reference.md)
- Complete Accu