Implement Syncfusion React Accumulation Charts including Pie, Doughnut, Funnel, and Pyramid chart types. Use this skill when users need circular data visualization, percentage-based charts, or proportional data displays. Covers data labels, legends, tooltips, grouping, smart labels, drill-down 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](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 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: Common Patterns Pattern 1: Doughnut Chart with Legend Pattern 2: Funnel Chart with Data Labels Pattern 3: Semi Pie Chart (Gauge Style) Pattern 4: Exploded Pie Chart API Reference AccumulationChartComponent Properties Core Properties Property Type Default Description dataSource Object[] \ DataManager '' Data source for the chart series AccumulationSeriesModel[] Collection of series configurations title string null Main title of the chart subTitle string null Subtitle displayed below the main title width string null Width of the chart ('100px', '100%') height string null Height of the chart ('100px', '100%') theme AccumulationTheme 'Material' Visual theme (Material, Bootstrap5, Fluent, Tailwind, etc.) background string null Background color (hex or rgba) backgroundImage string null Background image URL Feature Properties Property Type Default Description enableSmartLabels boolean true Prevent label overlapping with smart positioning enableAnimation boolean true Enable animations for chart rendering enableBorderOnMouseMove boolean true Show border on mouse hover enableExport boolean true Enable export functionality (JPEG, PNG, SVG, PDF) useGroupingSeparator boolean false Use thousand separators in numbers enablePersistence boolean false Persist component state across page reloads enableRtl boolean false Enable right to left rendering enableHtmlSanitizer boolean false Sanitize untrusted HTML values Interactive Properties Property Type Default Description selectionMode AccumulationSelectionMode 'None' Point selection mode ('None', 'Point') selectionPattern SelectionPattern 'None' Pattern for selected points (Chessboard, Dots, etc.) highlightMode AccumulationHighlightMode 'None' Point highlighting mode ('None', 'Point') highlightPattern SelectionPattern 'None' Pattern for highlighted points highlightColor string '' Color for highlighted points isMultiSelect boolean false Allow multiple point selection selectedDataIndexes IndexesModel[] [] Initially selected point indexes Layout Properties Property Type Default Description center PieCenterModel {x: '50%', y: '50%'} Center position of pie chart margin MarginModel Chart margins (left, right, top, bottom) border BorderModel Chart border (color, width) legendSettings LegendSettingsModel Legend configuration tooltip TooltipSettingsModel Tooltip configuration annotations AccumulationAnnotationSettingsModel[] Chart annotations centerLabel CenterLabelModel Label at chart center Accessibility Properties Property Type Default Description accessibility AccessibilityModel Accessibility configuration for screen readers focusBorderColor string null Custom focus border color focusBorderWidth number 1.5 Focus border width in pixels focusBorderMargin number 0 Focus border margin in pixels locale string 'en US' Localization culture string AccumulationSeriesDirective Properties Property Type Default Description type string 'Pie' Chart type ('Pie', 'Funnel', 'Pyramid')

syncfusion-react-accumulation-chart