Syncfusion Angular Accumulation Chart

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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

<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

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

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):

@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):

@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

Troubleshooting

❌ NG8002: Can't bind to 'palette' since it isn't a known property of 'ejs-accumulationchart'

Cause: [palette] is not a typed @Input() in the Syncfusion Angular wrapper for AccumulationChartComponent. Angular's strict template checker ("strictTemplates": true) raises NG8002 and the build fails.

Wrong — causes NG8002:

<!-- ❌ DO NOT DO THIS — [palette] on chart element is not a typed @Input() -->
<ejs-accumulationchart [palette]="chartPalette">
  <e-accumulation-series [dataSource]="data" xName="x" yName="y">
  </e-accumulation-series>
</ejs-accumulationchart>

Correct — Option A: [palettes] on the series (color array):

<!-- ✅ [palettes] is a typed @Input() on AccumulationSeriesDirective -->
<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>

palette = ['#E94649', '#F6B53F', '#6FAAB0', '#FF33F3', '#228B22', '#3399FF'];
// data points need no fill field — palette colors apply cyclically

Correct — Option B: pointColorMapping on the series (color per data point):

<!-- ✅ Also strict-mode safe — color stored in each data object -->
<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>

data = [
  { x: 'Electronics', y: 108310, fill: '#0ea5e9' },
  { x: 'Clothing',    y: 68280,  fill: '#6366f1' },
  { x: 'Grocery',     y: 51210,  fill: '#10b981' },
  { x: 'Furniture',   y: 34140,  fill: '#f59e0b' },
  { x: 'Others',      y: 22760,  fill: '#94a3b8' }
];

Key rule: Both [palettes] and pointColorMapping belong on <e-accumulation-series>, not on the chart element.

❌ NG8002: Other unknown property errors

If you see similar NG8002 errors for any <ejs-accumulationchart> binding, check that:

1. AccumulationChartModule is listed in the component's imports: [...]
2. The property name matches the typed @Input() exactly (camelCase)
3. Services (PieSeriesService, etc.) are listed in providers: [...]

Next Steps

1. Start with: references/getting-started.md to set up your first chart
2. Choose chart type: references/series-and-types.md for detailed type information
3. Customize: Use other references based on your specific needs (labels, legends, interactivity, styling)
4. Enhance: Refer to references/accessibility-and-responsive.md for production-ready implementations

API Reference Documentation

Comprehensive API Catalog

Complete API Guide: references/api-reference.md

All API documentation is available at https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/

Quick API Links

Core Components:

• AccumulationChart - Main chart component
• AccumulationSeries - Series configuration
• AccumulationDataLabelSettings - Data label settings
• LegendSettings - Legend configuration
• TooltipSettings - Tooltip settings

Key Enumerations:

• AccumulationType - Pie, Doughnut, Pyramid, Funnel
• AccumulationLabelPosition - Inside, Outside
• LegendPosition - Top, Bottom, Left, Right

Event Interfaces:

• IAccLoadedEventArgs - Load event
• IAccPointRenderEventArgs - Point render event
• IAccLegendClickEventArgs - Legend click event

Each reference guide includes an "API Reference Summary" section at the end with relevant API links.

Related Skills

• Implementing line/bar charts (for other chart types)
• Working with Angular data binding
• Angular component styling and theming