syncfusion-angular-accumulation-chart

What this skill does

# Implementing Syncfusion Angular Accumulation Chart

The Accumulation Chart component is a powerful visualization tool for displaying data distribution across categories using pie charts, doughnut charts, pyramids, and funnels. This skill guides you through creating, configuring, and customizing accumulation charts in Angular applications.

## When to Use This Skill

- **Creating pie/doughnut charts** - Display proportional data distribution
- **Building pyramid/funnel charts** - Show hierarchical or step-wise data
- **Adding interactive elements** - Implement tooltips, selection, and click events
- **Customizing appearance** - Apply themes, colors, gradients, and animations
- **Handling data labels** - Configure label positioning, formatting, and templates
- **Managing legends** - Add and customize chart legends
- **Adding annotations** - Insert titles, center labels, and custom annotations
- **Ensuring accessibility** - Implement WCAG compliance and keyboard navigation
- **Dynamic updates** - Handle real-time data changes and grouping
- **Export/Print** - Export charts to PDF or print functionality

## Component Overview

The Accumulation Chart supports multiple series types within a single component:

- **Pie Chart** - Circular slices representing data proportions
- **Donut (Pie with innerRadius) Chart** - Pie chart variant with hollow center (supports center label)
- **Pyramid Chart** - Data stacked in pyramid shape
- **Funnel Chart** - Data visualization in funnel shape

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation via ng add command
- Basic chart creation with data binding
- Array and JSON data formats
- CSS imports and theme setup
- Initial component configuration

### Series Types and Configuration
📄 **Read:** [references/series-and-types.md](references/series-and-types.md)
- Pie vs Doughnut vs Pyramid vs Funnel
- Series properties and options
- Multiple series rendering
- Type-specific features and use cases

### Data Labels and Legends
📄 **Read:** [references/data-labels-and-legends.md](references/data-labels-and-legends.md)
- Data label positioning (inside, outside, auto)
- Label formatting and custom templates
- Label visibility and intersection handling
- Legend placement and customization
- Legend click events and interactions

### Annotations and Titles
📄 **Read:** [references/annotations-and-titles.md](references/annotations-and-titles.md)
- Chart titles and subtitles
- Center labels for doughnut charts
- Text and image annotations
- Annotation positioning and alignment

### Appearance and Styling
📄 **Read:** [references/appearance-and-styling.md](references/appearance-and-styling.md)
- Color palettes and theme selection
- Animation configuration and timing
- Gradient and solid fills
- Custom CSS styling
- Print and export functionality

### Interactive Features
📄 **Read:** [references/interactive-features.md](references/interactive-features.md)
- Tooltip configuration and customization
- Selection modes (single, multiple, none)
- Point and series selection events
- Click and hover event handlers
- Selection styling

### Accessibility and Responsive Design
📄 **Read:** [references/accessibility-and-responsive.md](references/accessibility-and-responsive.md)
- WCAG compliance requirements
- Keyboard navigation patterns
- ARIA attributes and labels
- Screen reader support
- Responsive chart sizing
- Mobile and touch support

### Advanced Scenarios
📄 **Read:** [references/advanced-scenarios.md](references/advanced-scenarios.md)
- Dynamic data updates and refresh
- Data grouping and filtering
- Empty point handling
- Common patterns and workflows
- EJ1 to EJ2 migration guide

## Quick Start Example

### Basic Pie Chart

```typescript
import { Component } from '@angular/core';
import { AccumulationChartModule, PieSeriesService, AccumulationTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationTooltipService],
  template: `
    <ejs-accumulationchart id="container" [tooltip]="{ enable: true }">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          type="Pie">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `,
  styles: [`#container { height: 420px; width: 100%; }`]
})
export class AppComponent {
  data = [
    { x: 'Chrome', y: 37 },
    { x: 'Firefox', y: 28 },
    { x: 'Safari', y: 18 },
    { x: 'Others', y: 17 }
  ];
}
```

### Basic Donut (Pie with innerRadius) Chart with Center Label

```typescript
<ejs-accumulationchart id="container">
  <e-accumulation-series-collection>
    <e-accumulation-series
      [dataSource]="data"
      xName="x"
      yName="y"
      type="Pie" innerRadius="40%"
      [dataLabel]="{ visible: true, position: 'Inside', name: 'text' }">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

<!-- Center label in template -->
<div style="font-size: 18px; text-align: center;">
  Total Sales: $45,000
</div>
```

## Common Patterns

### Pattern 1: Dynamic Data Update

```typescript
updateData() {
  this.data = [
    { x: 'Q1', y: 25000 },
    { x: 'Q2', y: 35000 },
    { x: 'Q3', y: 42000 },
    { x: 'Q4', y: 50000 }
  ];
  // Chart automatically refreshes with new data
}
```

### Pattern 2: Handling Selection Events

```typescript
onPointSelected(args: IPointEventArgs) {
  console.log('Selected point:', args.pointIndex);
  console.log('Selected value:', args.series.dataSource[args.pointIndex].y);
}
```

### Pattern 3: Custom Color Palette

Two strict-template-safe approaches — pick the one that fits your data model:

**Option A — `[palettes]` on the series (color array, applied cyclically):**

```typescript
@Component({
  template: `
    <ejs-accumulationchart>
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          [palettes]="palette">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 },
    { x: 'D', y: 15 }
  ];
  palette = ['#E94649', '#F6B53F', '#6FAAB0', '#FF33F3'];
}
```

**Option B — `pointColorMapping` on the series (color embedded in each data point):**

```typescript
@Component({
  template: `
    <ejs-accumulationchart>
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          pointColorMapping="fill">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  data = [
    { x: 'A', y: 30, fill: '#FF6B6B' },
    { x: 'B', y: 25, fill: '#4ECDC4' },
    { x: 'C', y: 20, fill: '#45B7D1' },
    { x: 'D', y: 15, fill: '#FFA07A' }
  ];
}
```

> ⚠️ **Do NOT use `[palette]` (singular) on `<ejs-accumulationchart>`** — it is not a typed
> `@Input()` and causes **NG8002** in Angular strict mode. Both options above go on
> `<e-accumulation-series>` and are fully strict-mode safe.
```

### Pattern 4: Legend with Position

```typescript
<ejs-accumulationchart>
  <e-accumulation-legend
    [visible]="true"
    position="Right"
    [enableHighlight]="true">
  </e-accumulation-legend>
</ejs-accumulationchart>
```

## Key Configuration Props

| Property | Type | Purpose |
|----------|------|---------|
| `type` | string | Chart type: 'Pie', 'Doughnut', 'Pyramid', 'Funnel' |
| `dataSource` | object[] | Array of data points with x and y values |
| `xName` | string | Field name for category data |
| `yName` | string | Field name for value data |
|