syncfusion-blazor-accumulation-chart

What this skill does

# Implementing Syncfusion Blazor Accumulation Charts

**NuGet:** `Syncfusion.Blazor.Charts` + `Syncfusion.Blazor.Themes`  
**Namespace:** `Syncfusion.Blazor.Charts`

A comprehensive guide for implementing the Syncfusion Blazor Accumulation Chart component to create interactive pie, doughnut, funnel, and pyramid charts that visualize proportional and hierarchical data in Blazor applications.

## When to Use This Skill

Use this skill when you need to:
- **Create pie charts** to show proportional data distribution
- **Build doughnut charts** with center labels or multiple series
- **Implement funnel charts** for stage-based data (sales pipeline, conversion rates)
- **Create pyramid charts** for hierarchical data visualization
- **Display percentage distributions** and part-to-whole relationships
- **Visualize market share**, survey results, or categorical proportions
- **Show composition data** with interactive slicing and legends
- **Add data labels** with smart positioning and connector lines
- **Implement center labels** for doughnut charts with dynamic content
- **Customize appearance** with gradients, themes, and annotations
- **Group small slices** to improve readability
- **Handle user interactions** with tooltips, selection, and events
- **Create accessible charts** with ARIA support and keyboard navigation

## Component Overview

The Syncfusion Blazor Accumulation Chart component specializes in circular and triangular visualizations for proportional data:

- **4 Chart Types:** Pie, Doughnut, Funnel, Pyramid
- **Data Labels:** Smart positioning, connector lines, templates, text wrapping
- **Legends:** Customizable positioning, paging, click behavior
- **Tooltips:** Formatted display, custom templates
- **Center Labels:** Doughnut-specific feature with dynamic content
- **Grouping:** Combine small slices into "Others" category
- **Customization:** Gradients, annotations, themes, colors, borders
- **Interactivity:** Selection, explosion, hover effects, animations
- **Accessibility:** WCAG compliance, ARIA support, keyboard navigation
- **Export:** Print support, image export

## Documentation and Navigation Guide

### Getting Started

📄 **Read:** [references/getting-started.md](references/getting-started.md)

Use this when:
- Setting up a new Blazor Accumulation Chart project
- Installing NuGet packages and dependencies
- Creating your first pie or doughnut chart
- Understanding basic component structure
- Working with Visual Studio, VS Code, or .NET CLI
- Binding data to accumulation charts

Topics covered:
- Installation prerequisites and system requirements
- NuGet package installation (Syncfusion.Blazor.Charts)
- Service registration and namespace imports
- Theme and script references
- Basic SfAccumulationChart implementation
- Data source configuration (XName, YName properties)
- Adding title, data labels, tooltip, and legend
- Running the application

---

### Chart Types

📄 **Read:** [references/chart-types.md](references/chart-types.md)

Use this when:
- Choosing the right chart type for your data
- Implementing pie charts (default type)
- Creating doughnut charts with inner radius
- Building funnel charts for conversion visualization
- Designing pyramid charts for hierarchical data
- Understanding type-specific properties

Topics covered:
- **Pie Chart:** Default circular visualization, when to use
- **Doughnut Chart:** Inner radius configuration, center content area
- **Funnel Chart:** Neck dimensions, width/height ratios, data flow
- **Pyramid Chart:** Linear vs surface mode, base positioning
- Type property configuration
- Visual differences and use cases
- Code examples for each type

---

### Data Labels

📄 **Read:** [references/data-label.md](references/data-label.md)

Use this when:
- Enabling and customizing data labels
- Positioning labels inside or outside slices
- Implementing smart labels for collision avoidance
- Adding connector lines from labels to slices
- Customizing label text, format, and templates
- Handling text wrapping and overflow
- Using custom data fields for label text

Topics covered:
- Visible property to enable labels
- Position options (Inside, Outside)
- Text wrapping with MaxWidth
- Smart label positioning
- Connector line customization (type, length, color, width)
- Text mapping from data source fields
- Format patterns (N1, P1, C1 for numbers/percentages/currency)
- Template customization with HTML and context values
- Font styling, borders, and backgrounds

---

### Legends

📄 **Read:** [references/legend.md](references/legend.md)

Use this when:
- Adding legends to accumulation charts
- Positioning legends (top, bottom, left, right)
- Customizing legend appearance and behavior
- Implementing legend paging for many data points
- Creating custom legend templates
- Handling legend click events

Topics covered:
- Enabling legends with Visible property
- Position and alignment options
- Legend shape customization
- Text styling and truncation
- Toggle visibility behavior on legend click
- Legend paging configuration
- Custom templates for legend items
- Click and hover events

---

### Tooltips

📄 **Read:** [references/tooltip.md](references/tooltip.md)

Use this when:
- Enabling tooltips on hover
- Formatting tooltip content
- Creating custom tooltip templates
- Styling tooltip appearance
- Configuring tooltip behavior and animation

Topics covered:
- Enable property for tooltip activation
- Format string for value display
- Header customization
- Custom templates with HTML
- Border, fill, and font styling
- Animation settings
- Shared tooltips (if applicable)

---

### Center Labels

📄 **Read:** [references/center-label.md](references/center-label.md)

Use this when:
- Adding text in the center of doughnut charts
- Displaying static or dynamic center content
- Customizing center label appearance
- Showing aggregated data in center
- Implementing hover-based center text updates

Topics covered:
- Center label Text property
- TextStyle customization (font, size, color)
- Dynamic text with templates
- Hover-based text updates using events
- Center label visibility control
- Use cases and best practices

---

### Customization and Styling

📄 **Read:** [references/customization-styling.md](references/customization-styling.md)

Use this when:
- Applying gradient fills to slices
- Grouping small slices into "Others"
- Adding annotations (text, shapes, images)
- Handling empty points in data
- Customizing themes and color palettes
- Setting border styles and radius
- Implementing responsive layouts
- Using adaptive design for mobile

Topics covered:
- **Gradients:** Radial and linear fills for slices
- **Grouping:** GroupTo and GroupMode for combining small values
- **Annotations:** Text, shape, and image annotations with positioning
- **Empty Points:** Mode options (Zero, Drop, Average, Gap)
- **Themes:** Built-in themes and custom theme application
- **Colors:** Custom color palettes and per-point colors
- **Borders:** Width, color, and dash array
- **Radius:** Inner radius (doughnut) and overall chart radius
- **Responsive:** Adaptive layout for different screen sizes

---

### Animation and Events

📄 **Read:** [references/animation-events.md](references/animation-events.md)

Use this when:
- Configuring chart load animations
- Handling point selection and click events
- Responding to mouse hover and leave events
- Implementing custom interactions
- Accessing chart lifecycle events
- Working with series and point rendering events

Topics covered:
- **Animation:** Enable, duration, delay configuration
- **Chart Events:** Load, Loaded, BeforeResize, Resized
- **Point Events:** OnPointClick, OnPointMove, PointRender
- **Series Events:** SeriesRender, OnLegendClick
- **Data Label Events:** OnDataLabelRender, TextRender
- **Selection:** OnSelectionComplete, selection mode
- **Tooltip Events:** TooltipRender
- Event data structures and parameters
- Practical event handling examples

---

### Accessibili