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

<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 |
| `dataLabel` | object | Label configuration (position, formatting) |
| `tooltip` | object | Tooltip settings (enable, template, formatting) |
| `palettes` | string[] | **Series property** — array of hex/named colors applied cyclically to points. Use `[palettes]="palette"` on `<e-accumulation-series>`. ✅ Strict-mode safe. |
| `pointColorMapping` | string | **Series property** — field name in each data object holding the point color (e.g. `"fill"`). Use `pointColorMapping="fill"` on `<e-accumulation-series>`. ✅ Strict-mode safe. |
| `animation` | object | Animation configuration (enable, duration) |
| `startAngle` | number | Starting angle for pie/doughnut (0-360) |
| `explode` | boolean | Enable point separation effect |

## 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](references/getting-started.md) to set up your first chart
2. **Choose chart type:** [references/series-and-types.md](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](references/accessibility-and-responsive.md) for production-ready implementations



## API Reference Documentation

### Comprehensive API Catalog
**Complete API Guide:** [references/api-reference.md](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](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChart) - Main chart component
- [AccumulationSeries](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries) - Series configuration
- [AccumulationDataLabelSettings](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings) - Data label settings
- [LegendSettings](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/legendSettings) - Legend configuration
- [TooltipSettings](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/tooltipSettings) - Tooltip settings

**Key Enumerations:**
- [AccumulationType](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationType) - Pie, Doughnut, Pyramid, Funnel
- [AccumulationLabelPosition](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationLabelPosition) - Inside, Outside
- [LegendPosition](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/legendPosition) - Top, Bottom, Left, Right

**Event Interfaces:**
- [IAccLoadedEventArgs](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/iAccLoadedEventArgs) - Load event
- [IAccPointRenderEventArgs](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/iAccPointRenderEventArgs) - Point render event
- [IAccLegendClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/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

Accessibility and Responsive Design

Table of Contents

• Accessibility Overview
• WCAG Compliance
• Keyboard Navigation
• ARIA Attributes
• Screen Reader Support
• Color Contrast
• Responsive Design
• Mobile Considerations
• Accessible Component Example

Accessibility Overview

Accumulation charts must be accessible to all users, including those using assistive technologies. This guide covers WCAG 2.1 Level AA compliance standards.

Key Accessibility Principles

1. Perceivable - Content must be presented in accessible ways 2. Operable - Users must be able to navigate using keyboard 3. Understandable - Content must be clear and predictable 4. Robust - Content must work with assistive technologies

WCAG Compliance

Level AA Compliance Checklist

• [ ] Alternative text for chart (title, description)
• [ ] Keyboard accessible (no mouse-only interactions)
• [ ] Sufficient color contrast (4.5:1 for text)
• [ ] Readable font sizes (minimum 12px, 1.2em line-height)
• [ ] No flashing content (max 3 times/second)
• [ ] Descriptive labels and legends
• [ ] ARIA labels and descriptions
• [ ] Focus visible indicators
• [ ] Logical tab order

Accessibility Configuration

@Component({
  template: `
    <ejs-accumulationchart 
      id="container"
      [title]="'Sales Distribution Chart'"
      [description]="chartDescription"
      role="img"
      [attr.aria-label]="ariaLabel">
      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class AccessibleChartComponent {
  chartDescription = 'Pie chart showing Q4 sales by product category. Product A: 35%, Product B: 28%, Product C: 20%, Product D: 17%.';
  ariaLabel = 'Q4 2024 Sales Distribution by Product Category';

  data = [
    { x: 'Product A', y: 35, text: '35%' },
    { x: 'Product B', y: 28, text: '28%' },
    { x: 'Product C', y: 20, text: '20%' },
    { x: 'Product D', y: 17, text: '17%' }
  ];
}

Keyboard Navigation

Enable Keyboard Support

<ejs-accumulationchart 
  [enableExport]="true"
  [tooltip]="{ enable: true }"
  [highlightMode]="'Point'"
  selectionMode="Point">
  <e-accumulation-series-collection>
    <e-accumulation-series [dataSource]="data">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

Keyboard Shortcuts

Keyboard Event Handlers

@Component({
  template: `
    <ejs-accumulationchart 
      (keyDown)="onKeyDown($event)"
      (keyUp)="onKeyUp($event)"
      tabIndex="0">
      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class KeyboardAccessibleComponent {
  focusedIndex = 0;
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 }
  ];

  onKeyDown(event: KeyboardEvent) {
    switch (event.key) {
      case 'ArrowRight':
      case 'ArrowDown':
        this.focusedIndex = (this.focusedIndex + 1) % this.data.length;
        break;
      case 'ArrowLeft':
      case 'ArrowUp':
        this.focusedIndex = (this.focusedIndex - 1 + this.data.length) % this.data.length;
        break;
      case 'Enter':
      case ' ':
        this.selectCurrentPoint();
        break;
    }
  }

  onKeyUp(event: KeyboardEvent) {
    // Handle additional key up events if needed
  }

  selectCurrentPoint() {
    console.log('Selected:', this.data[this.focusedIndex]);
  }
}

ARIA Attributes

ARIA Labels

Provide descriptive labels for assistive technologies:

<ejs-accumulationchart 
  role="img"
  [attr.aria-label]="'Sales pie chart'"
  [attr.aria-describedby]="'chart-description'">
  <span id="chart-description" style="display:none;">
    {{ chartDescription }}
  </span>
  <e-accumulation-series-collection>
    <e-accumulation-series [dataSource]="data">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

ARIA Live Regions

Announce chart changes for screen reader users:

@Component({
  template: `
    <div [attr.aria-live]="'polite'" [attr.aria-atomic]="'true'">
      {{ screenReaderAnnouncement }}
    </div>
    <ejs-accumulationchart (pointClick)="onPointClick($event)">
      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ARIAChartComponent {
  screenReaderAnnouncement = '';
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 }
  ];

  onPointClick(args: IPointEventArgs) {
    this.screenReaderAnnouncement = 
      `Selected ${args.point.x}: ${args.point.y} units, 
       which is ${args.point.percentage.toFixed(1)}% of total`;
  }
}

ARIA Roles and Properties

<ejs-accumulationchart 
  role="img"
  [attr.aria-label]="'Interactive sales chart'"
  [attr.aria-expanded]="true"
  [attr.aria-controls]="'chart-legend'">
  <e-accumulation-legend id="chart-legend">
  </e-accumulation-legend>
  <e-accumulation-series-collection>
    <e-accumulation-series [dataSource]="data">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

Screen Reader Support

Semantic HTML Structure

@Component({
  template: `
    <article class="chart-section">
      <h2 id="chart-title">Sales Performance Dashboard</h2>
      <p id="chart-desc">
        This chart displays quarterly sales distribution 
        across product categories for 2024.
      </p>
      
      <ejs-accumulationchart 
        role="img"
        [attr.aria-labelledby]="'chart-title'"
        [attr.aria-describedby]="'chart-desc'">
        <e-accumulation-series-collection>
          <e-accumulation-series [dataSource]="data">
          </e-accumulation-series>
        </e-accumulation-series-collection>
      </ejs-accumulationchart>
      
      <section aria-label="Chart data table">
        <table>
          <thead>
            <tr>
              <th>Quarter</th>
              <th>Sales</th>
              <th>Percentage</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of data">
              <td>{{ item.x }}</td>
              <td>{{ item.y | number }}</td>
              <td>{{ item.percentage | number: '1.1-2' }}%</td>
            </tr>
          </tbody>
        </table>
      </section>
    </article>
  `
})
export class ScreenReaderComponent {
  data = [
    { x: 'Q1', y: 150000, percentage: 25 },
    { x: 'Q2', y: 180000, percentage: 30 },
    { x: 'Q3', y: 210000, percentage: 35 },
    { x: 'Q4', y: 60000, percentage: 10 }
  ];
}

Alternative Data Representation

Provide a data table as fallback for screen readers:

@Component({
  template: `
    <div [attr.aria-hidden]="false">
      <!-- Chart for visual users -->
      <ejs-accumulationchart id="visual-chart">
        <e-accumulation-series-collection>
          <e-accumulation-series [dataSource]="data">
          </e-accumulation-series>
        </e-accumulation-series-collection>
      </ejs-accumulationchart>
      
      <!-- Data table for assistive technology -->
      <table class="sr-only" aria-label="Chart data">
        <caption>Sales by Region - Detailed Data</caption>
        <thead>
          <tr>
            <th>Region</th>
            <th>Sales ($)</th>
            <th>Percentage</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of data">
            <td>{{ item.x }}</td>
            <td>{{ item.y | currency }}</td>
            <td>{{ item.percentage }}%</td>
          </tr>
        </tbody>
      </table>
    </div>
  `,
  styles: [`
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  `]
})
export class AccessibleDataComponent {
  data = [
    { x: 'North', y: 450000, percentage: 38 },
    { x: 'South', y: 350000, percentage: 29 },
    { x: 'East', y: 280000, percentage: 23 },
    { x: 'West', y: 70000, percentage: 6 }
  ];
}

Color Contrast

Minimum Contrast Ratios

• Text and graphics: 4.5:1 (normal), 3:1 (large)
• UI components: 3:1

Accessible Color Palettes

// High contrast palette
highContrastPalette = [
  '#000000',  // Black
  '#FFFFFF',  // White
  '#FF6B00',  // Orange
  '#003DA5',  // Blue
  '#00B050'   // Green
];

// Colorblind-friendly palette
colorblindPalette = [
  '#0173B2',  // Blue
  '#DE8F05',  // Orange
  '#CC78BC',  // Purple
  '#CA9161',  // Brown
  '#949494'   // Gray
];

Checking Contrast

onPointRender(args: IAccumulationEventArgs) {
  // Use colors with sufficient contrast
  const accessibleColors = [
    '#1F77B4',  // Blue (contrast: 4.5:1)
    '#FF7F0E',  // Orange (contrast: 3.1:1)
    '#2CA02C',  // Green (contrast: 5.2:1)
    '#D62728'   // Red (contrast: 3.3:1)
  ];
  
  args.fill = accessibleColors[args.pointIndex % accessibleColors.length];
}

Responsive Design

Responsive Container

@Component({
  template: `
    <div class="chart-container">
      <ejs-accumulationchart 
        id="container"
        [width]="'100%'"
        [height]="'100%'">
        <e-accumulation-series-collection>
          <e-accumulation-series [dataSource]="data">
          </e-accumulation-series>
        </e-accumulation-series-collection>
      </ejs-accumulationchart>
    </div>
  `,
  styles: [`
    .chart-container {
      width: 100%;
      height: 400px;
      max-width: 1200px;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      .chart-container {
        height: 300px;
      }
    }

    @media (max-width: 480px) {
      .chart-container {
        height: 250px;
      }
    }
  `]
})
export class ResponsiveChartComponent {
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 }
  ];
}

Responsive Legend Placement

@Component({
  template: `
    <ejs-accumulationchart 
      [legendPosition]="legendPosition">
      <e-accumulation-legend 
        [visible]="true"
        [position]="legendPosition">
      </e-accumulation-legend>
      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ResponsiveLegendComponent {
  @HostListener('window:resize', ['$event'])
  onResize(event: IAccResizeEventArgs) {
    this.updateLegendPosition();
  }

  legendPosition = 'Right';

  updateLegendPosition() {
    if (window.innerWidth < 768) {
      this.legendPosition = 'Bottom';
    } else {
      this.legendPosition = 'Right';
    }
  }
}

Mobile Considerations

Touch-Friendly Interactions

@Component({
  template: `
    <ejs-accumulationchart 
      [tooltip]="{ enable: true }"
      [selectionMode]="'Point'"
      (chartMouseClick)="onTouchPoint($event)">
      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class MobileChartComponent {
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 }
  ];

  onTouchPoint(args: IPointEventArgs) {
    // Larger touch targets for mobile
    console.log('Touch/click detected:', args);
  }
}

Mobile-Optimized Labels

labelConfig = {
  visible: true,
  position: 'Inside',
  textStyle: {
    fontSize: '16px',  // Larger for readability
    fontWeight: '500'
  }
};

Accessible Component Example

Complete Accessible Chart

@Component({
  selector: 'app-accessible-chart',
  template: `
    <section class="accessible-chart-section">
      <h2 id="chart-heading">Q4 Sales Analysis</h2>
      <p id="chart-summary">
        Interactive pie chart showing sales distribution across 
        four regions. Use arrow keys to navigate, Enter to select.
      </p>

      <ejs-accumulationchart 
        id="accessible-chart"
        role="img"
        tabIndex="0"
        [attr.aria-labelledby]="'chart-heading'"
        [attr.aria-describedby]="'chart-summary'"
        [width]="'100%'"
        [height]="'100%'"
        [title]="'Sales by Region'"
        [tooltip]="tooltipConfig"
        selectionMode="Point"
        (keyDown)="handleKeyboard($event)"
        (pointClick)="onPointSelected($event)">
        
        <e-accumulation-legend 
          [visible]="true"
          position="Right"
          [enableHighlight]="true">
        </e-accumulation-legend>
        
        <e-accumulation-series-collection>
          <e-accumulation-series
            [dataSource]="chartData"
            xName="region"
            yName="sales"
            type="Pie"
            [dataLabel]="labelConfig"
            (pointRender)="onPointRender($event)">
          </e-accumulation-series>
        </e-accumulation-series-collection>
      </ejs-accumulationchart>

      <div class="sr-announcement" 
           [attr.aria-live]="'polite'" 
           [attr.aria-atomic]="'true'">
        {{ announcement }}
      </div>

      <!-- Alternative data representation -->
      <table class="data-table" aria-label="Sales data details">
        <caption>Detailed Sales Information</caption>
        <thead>
          <tr>
            <th>Region</th>
            <th>Sales</th>
            <th>Percentage</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of chartData">
            <td>{{ item.region }}</td>
            <td>{{ item.sales | currency }}</td>
            <td>{{ (item.sales / getTotalSales() * 100) | number: '1.1-2' }}%</td>
          </tr>
        </tbody>
      </table>
    </section>
  `,
  styles: [`
    .accessible-chart-section {
      padding: 20px;
      max-width: 900px;
      margin: 0 auto;
    }

    #accessible-chart {
      height: 450px;
      margin: 20px 0;
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    .data-table th,
    .data-table td {
      padding: 12px;
      text-align: left;
      border: 1px solid #ddd;
    }

    .data-table th {
      background: #f5f5f5;
      font-weight: 600;
    }

    .sr-announcement {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
    }

    @media (max-width: 768px) {
      #accessible-chart {
        height: 350px;
      }

      .data-table {
        font-size: 14px;
      }
    }
  `]
})
export class AccessibleChartExampleComponent {
  chartData = [
    { region: 'North', sales: 450000 },
    { region: 'South', sales: 350000 },
    { region: 'East', sales: 280000 },
    { region: 'West', sales: 120000 }
  ];

  announcement = '';
  focusedIndex = 0;

  tooltipConfig = {
    enable: true,
    format: '${point.x}: ${point.y | currency}'
  };

  labelConfig = {
    visible: true,
    position: 'Inside',
    format: '${point.percentage}%'
  };

  handleKeyboard(event: KeyboardEvent) {
    switch (event.key) {
      case 'ArrowRight':
      case 'ArrowDown':
        this.focusedIndex = (this.focusedIndex + 1) % this.chartData.length;
        this.updateAnnouncement();
        break;
      case 'ArrowLeft':
      case 'ArrowUp':
        this.focusedIndex = (this.focusedIndex - 1 + this.chartData.length) % this.chartData.length;
        this.updateAnnouncement();
        break;
    }
  }

  onPointSelected(args: IPointEventArgs) {
    const item = this.chartData[args.pointIndex];
    this.announcement = `${item.region}: ${item.sales} in sales`;
  }

  onPointRender(args: IAccumulationEventArgs) {
    // Use accessible colors
    const colors = ['#0173B2', '#DE8F05', '#CC78BC', '#CA9161'];
    args.fill = colors[args.pointIndex % colors.length];
  }

  updateAnnouncement() {
    const item = this.chartData[this.focusedIndex];
    this.announcement = `${item.region} region selected`;
  }

  getTotalSales(): number {
    return this.chartData.reduce((sum, item) => sum + item.sales, 0);
  }
}

Key Takeaways

• WCAG 2.1 AA: Meet accessibility standards for all users
• Keyboard Navigation: Support full keyboard control
• ARIA Labels: Provide semantic information for screen readers
• Color Contrast: Ensure 4.5:1 minimum ratio for text
• Responsive: Adapt to all screen sizes and devices
• Alternative Content: Provide data tables for assistive tech
• Testing: Validate with accessibility tools and real users

---

API Reference Summary

Accessibility APIs

Responsive APIs

For complete API documentation, see: api-reference.md

Advanced Scenarios

Table of Contents

• Dynamic Data Updates
• Data Grouping
• Empty Point Handling
• Real-Time Data Binding
• Common Patterns
• Performance Optimization
• EJ1 to EJ2 Migration

Dynamic Data Updates

Update Chart Data at Runtime

Refresh chart with new data without recreating the component:

@Component({
  template: `
    <div>
      <button (click)="updateData()">Refresh Data</button>
      <button (click)="appendData()">Add New Data</button>
      
      <ejs-accumulationchart id="container">
        <e-accumulation-series-collection>
          <e-accumulation-series
            [dataSource]="chartData"
            xName="x"
            yName="y"
            type="Pie">
          </e-accumulation-series>
        </e-accumulation-series-collection>
      </ejs-accumulationchart>
    </div>
  `
})
export class DynamicUpdateComponent {
  chartData = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 }
  ];

  updateData() {
    // Replace entire dataset
    this.chartData = [
      { x: 'A', y: 45 },
      { x: 'B', y: 35 },
      { x: 'C', y: 20 }
    ];
  }

  appendData() {
    // Add new data point
    this.chartData = [...this.chartData, { x: 'D', y: 15 }];
  }
}

Incremental Data Updates

For performance optimization with large datasets:

@Component({
  template: `
    <ejs-accumulationchart 
      #chart
      id="container">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="chartData"
          xName="x"
          yName="y"
          type="Pie">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class IncrementalUpdateComponent implements ViewChild {
  @ViewChild('chart') chart!: any;
  chartData: any[] = [];

  ngAfterViewInit() {
    // Initial data load
    this.loadInitialData();
    
    // Subscribe to updates
    setInterval(() => this.fetchUpdates(), 5000);
  }

  loadInitialData() {
    this.chartData = [
      { x: 'Q1', y: 150000 },
      { x: 'Q2', y: 180000 }
    ];
  }

  fetchUpdates() {
    // Fetch new data and update chart
    const newData = [
      { x: 'Q3', y: 210000 },
      { x: 'Q4', y: 240000 }
    ];
    
    // Instead of replacing, merge with existing
    this.chartData = [...this.chartData, ...newData];
  }
}

addPoint() and removePoint() Methods

The AccumulationChart series supports point-level data operations that update the chart without re-rendering the entire component.

addPoint()

Adds a new data point to the series.

API Reference:

• series[0].addPoint(point: Object, animationDuration?: number)

Example Usage:

// Add a data point dynamically
(this.chart).series[0].addPoint({ x: 'New', y: 25 });

removePoint()

Removes an existing data point from the series by index.

API Reference:

• series[0].removePoint(index: number, animationDuration?: number)

Example Usage:

// Remove the second data point
(this.chart).series[0].removePoint(1);

Data Grouping

Group Data by Category

Aggregate data points into groups:

@Component({
  template: `
    <ejs-accumulationchart id="container">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="groupedData"
          xName="category"
          yName="total"
          type="Doughnut">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class DataGroupingComponent {
  rawData = [
    { category: 'Electronics', subcategory: 'Phones', sales: 50000 },
    { category: 'Electronics', subcategory: 'Tablets', sales: 35000 },
    { category: 'Clothing', subcategory: 'Shirts', sales: 28000 },
    { category: 'Clothing', subcategory: 'Pants', sales: 32000 },
    { category: 'Home', subcategory: 'Furniture', sales: 45000 },
    { category: 'Home', subcategory: 'Decor', sales: 22000 }
  ];

  groupedData: any[] = [];

  ngOnInit() {
    this.groupData();
  }

  groupData() {
    const grouped: { [key: string]: number } = {};

    this.rawData.forEach(item => {
      if (grouped[item.category]) {
        grouped[item.category] += item.sales;
      } else {
        grouped[item.category] = item.sales;
      }
    });

    this.groupedData = Object.entries(grouped).map(([category, total]) => ({
      category,
      total
    }));
  }
}

Drill-Down Grouping

Create interactive drill-down charts:

@Component({
  template: `
    <div>
      <button *ngIf="groupLevel > 0" (click)="drillUp()">← Back</button>
      <h3>{{ currentLevel }}</h3>
      
      <ejs-accumulationchart id="container"
        (pointClick)="onPointClick($event)">
        <e-accumulation-series-collection>
          <e-accumulation-series
            [dataSource]="displayData"
            xName="label"
            yName="value"
            type="Pie">
          </e-accumulation-series>
        </e-accumulation-series-collection>
      </ejs-accumulationchart>
    </div>
  `
})
export class DrillDownComponent {
  groupLevel = 0;
  currentLevel = 'Product Categories';
  displayData: any[] = [];

  allData = {
    categories: [
      { label: 'Electronics', value: 85000 },
      { label: 'Clothing', value: 60000 },
      { label: 'Home', value: 67000 }
    ],
    Electronics: [
      { label: 'Phones', value: 50000 },
      { label: 'Tablets', value: 35000 }
    ],
    Clothing: [
      { label: 'Shirts', value: 28000 },
      { label: 'Pants', value: 32000 }
    ],
    Home: [
      { label: 'Furniture', value: 45000 },
      { label: 'Decor', value: 22000 }
    ]
  };

  ngOnInit() {
    this.displayData = this.allData.categories;
  }

  onPointClick(args: any) {
    const category = args.point.label;
    
    if (this.allData[category as keyof typeof this.allData]) {
      this.displayData = this.allData[category as keyof typeof this.allData];
      this.currentLevel = category;
      this.groupLevel++;
    }
  }

  drillUp() {
    if (this.groupLevel > 0) {
      this.displayData = this.allData.categories;
      this.currentLevel = 'Product Categories';
      this.groupLevel--;
    }
  }
}

Empty Point Handling

Handle Null/Zero Values

Configure behavior for missing or zero data points:

@Component({
  template: `
    <ejs-accumulationchart id="container">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="dataWithGaps"
          xName="x"
          yName="y"
          type="Pie"
          [emptyPointSettings]="emptyPointConfig">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class EmptyPointComponent {
  dataWithGaps = [
    { x: 'Q1', y: 50000 },
    { x: 'Q2', y: 0 },           // Empty point
    { x: 'Q3', y: 35000 },
    { x: 'Q4', y: null }          // Null value
  ];

  // Show empty points as gray segments
  emptyPointConfig = {
    mode: 'Zero',                 // 'Zero', 'Drop', 'Average'
    fill: '#D3D3D3',
    border: { color: '#999' }
  };
}

Empty Point Mode Options

Filter and Display Validation

@Component({
  template: `
    <div>
      <label>
        <input type="checkbox" [(ngModel)]="showEmpty"> 
        Show Empty Points
      </label>
      
      <ejs-accumulationchart id="container">
        <e-accumulation-series
          [dataSource]="filteredData"
          xName="x"
          yName="y"
          type="Doughnut">
        </e-accumulation-series>
      </ejs-accumulationchart>
    </div>
  `
})
export class FilterEmptyComponent {
  showEmpty = true;
  originalData = [
    { x: 'A', y: 50000 },
    { x: 'B', y: null },
    { x: 'C', y: 35000 },
    { x: 'D', y: 0 }
  ];

  get filteredData(): any[] {
    if (this.showEmpty) {
      return this.originalData.map(item => ({
        ...item,
        y: item.y || 0
      }));
    }
    return this.originalData.filter(item => item.y && item.y > 0);
  }
}

Real-Time Data Binding

Live Data Updates from Service

@Component({
  template: `
    <ejs-accumulationchart id="container">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="liveData"
          xName="timestamp"
          yName="value"
          type="Pie">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class LiveDataComponent implements OnInit, OnDestroy {
  liveData: any[] = [];
  private subscription: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // Subscribe to real-time updates
    this.subscription = this.dataService.getRealtimeData()
      .subscribe(newData => {
        this.liveData = newData;
      });
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

@Injectable()
export class DataService {
  getRealtimeData() {
    return interval(2000).pipe(
      switchMap(() => this.fetchData())
    );
  }

  private fetchData() {
    return timer(0, 2000).pipe(
      map(() => [
        { timestamp: new Date(), value: Math.random() * 100 },
        { timestamp: new Date(), value: Math.random() * 80 },
        { timestamp: new Date(), value: Math.random() * 90 }
      ])
    );
  }
}

Common Patterns

Pattern 1: KPI Dashboard with Auto-Refresh

@Component({
  selector: 'app-kpi-dashboard',
  template: `
    <div class="dashboard">
      <div class="chart-row">
        <div class="chart">
          <h4>Sales Distribution</h4>
          <ejs-accumulationchart>
            <e-accumulation-series-collection>
              <e-accumulation-series
                [dataSource]="salesData"
                type="Pie">
              </e-accumulation-series>
            </e-accumulation-series-collection>
          </ejs-accumulationchart>
        </div>
        
        <div class="chart">
          <h4>Regional Performance</h4>
          <ejs-accumulationchart>
            <e-accumulation-series-collection>
              <e-accumulation-series
                [dataSource]="regionalData"
                type="Doughnut">
              </e-accumulation-series>
            </e-accumulation-series-collection>
          </ejs-accumulationchart>
        </div>
      </div>
      
      <p class="last-update">Last updated: {{ lastUpdate | date: 'short' }}</p>
    </div>
  `,
  styles: [`
    .dashboard {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .chart {
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  `]
})
export class KPIDashboardComponent implements OnInit, OnDestroy {
  salesData: any[] = [];
  regionalData: any[] = [];
  lastUpdate = new Date();
  private refreshInterval: any;

  ngOnInit() {
    this.loadData();
    // Auto-refresh every 30 seconds
    this.refreshInterval = setInterval(() => this.loadData(), 30000);
  }

  loadData() {
    this.salesData = [
      { x: 'Product A', y: 45 },
      { x: 'Product B', y: 30 },
      { x: 'Product C', y: 25 }
    ];
    this.regionalData = [
      { x: 'North', y: 120 },
      { x: 'South', y: 95 },
      { x: 'East', y: 150 }
    ];
    this.lastUpdate = new Date();
  }

  ngOnDestroy() {
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  }
}

Pattern 2: Comparison Chart with Toggle

@Component({
  template: `
    <div>
      <div class="controls">
        <label>
          <input type="radio" [(ngModel)]="comparisonType" value="month"> 
          Monthly
        </label>
        <label>
          <input type="radio" [(ngModel)]="comparisonType" value="quarter"> 
          Quarterly
        </label>
        <label>
          <input type="radio" [(ngModel)]="comparisonType" value="year"> 
          Yearly
        </label>
      </div>
      
      <ejs-accumulationchart id="container">
        <e-accumulation-series-collection>
          <e-accumulation-series
            [dataSource]="getDataByType()"
            type="Pyramid">
          </e-accumulation-series>
        </e-accumulation-series-collection>
      </ejs-accumulationchart>
    </div>
  `
})
export class ComparisonChartComponent {
  comparisonType = 'month';

  monthlyData = [
    { x: 'Jan', y: 50 },
    { x: 'Feb', y: 45 },
    { x: 'Mar', y: 60 }
  ];

  quarterlyData = [
    { x: 'Q1', y: 155 },
    { x: 'Q2', y: 165 },
    { x: 'Q3', y: 180 },
    { x: 'Q4', y: 190 }
  ];

  yearlyData = [
    { x: '2021', y: 600 },
    { x: '2022', y: 650 },
    { x: '2023', y: 720 }
  ];

  getDataByType() {
    switch (this.comparisonType) {
      case 'quarter':
        return this.quarterlyData;
      case 'year':
        return this.yearlyData;
      default:
        return this.monthlyData;
    }
  }
}

Performance Optimization

Lazy Load Large Datasets

@Component({
  template: `
    <button (click)="loadMore()" [disabled]="allDataLoaded">
      Load More Data
    </button>
    <ejs-accumulationchart id="container">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="visibleData"
          type="Pie">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class LazyLoadComponent {
  visibleData: any[] = [];
  allData: any[] = [];
  pageSize = 20;
  currentPage = 0;

  get allDataLoaded(): boolean {
    return this.visibleData.length >= this.allData.length;
  }

  ngOnInit() {
    this.loadAllData();
    this.loadMore();
  }

  loadAllData() {
    // Generate large dataset
    this.allData = Array.from({ length: 1000 }, (_, i) => ({
      x: `Item ${i + 1}`,
      y: Math.floor(Math.random() * 100)
    }));
  }

  loadMore() {
    const start = this.currentPage * this.pageSize;
    const end = start + this.pageSize;
    this.visibleData = [...this.visibleData, ...this.allData.slice(start, end)];
    this.currentPage++;
  }
}

EJ1 to EJ2 Migration

Key API Changes

Migration Example

EJ1 Code:

angular.module('chartApp', ['ej.syncfusion.charts'])
  .controller('ChartController', function($scope) {
    $scope.seriesData = [
      { x: 'A', y: 30 },
      { x: 'B', y: 25 }
    ];
  });

// HTML:
// <ej-chart e-series="seriesData" e-type="pie">

EJ2 Code:

@Component({
  template: `
    <ejs-accumulationchart>
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="seriesData"
          xName="x"
          yName="y"
          type="Pie">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  seriesData = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 }
  ];
}

Migration Checklist

• [ ] Update component selector from ej-chart to ejs-accumulationchart
• [ ] Change property binding syntax (two-way → property binding)
• [ ] Update event names (camelCase with (event))
• [ ] Replace e-series with e-accumulation-series
• [ ] Update type values ('pie' → 'Pie')
• [ ] Migrate tooltip, legend configurations
• [ ] Test all interactive features
• [ ] Update styling and themes

Key Takeaways

• Dynamic Updates: Change data at runtime; chart auto-refreshes
• Data Grouping: Aggregate and filter data for different views
• Empty Handling: Configure behavior for null/zero values
• Real-Time: Use observables for live data updates
• Performance: Implement pagination and lazy loading for large datasets
• Migration: Follow systematic approach for EJ1 to EJ2 updates

---

API Reference Summary

Advanced Configuration APIs

Render Events

For complete API documentation, see: api-reference.md

Annotations and Titles

Table of Contents

• Chart Titles
• Subtitles
• Center Labels
• Annotations Overview
• Text Annotations
• Image Annotations
• Annotation Positioning
• Advanced Annotation Examples

Chart Titles

Basic Title

Add a main title to the accumulation chart:

<ejs-accumulationchart [title]="'Sales Distribution Chart'">
  <e-accumulation-series [dataSource]="data">
  </e-accumulation-series>
</ejs-accumulationchart>

Title Properties

interface TitleProperties {
  text: string;                    // Title text content
  visible: boolean;                // Show/hide title
  textAlignment: 'Center' | 'Left' | 'Right'; // Horizontal alignment
  textStyle: object;               // Font, color, size, etc.
  enableTrim: boolean;             // Trim long titles
  maximumLabelWidth: number;       // Max width for title
  margin: object;                  // Title margins
  subtitle: object;                // Subtitle configuration
}

Styled Title

@Component({
  template: `
    <ejs-accumulationchart 
      [title]="'Revenue by Product'"
      [titleStyle]="titleStyle">
      <e-accumulation-series [dataSource]="data">
      </e-accumulation-series>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  titleStyle = {
    color: '#333',
    fontFamily: 'Segoe UI',
    fontStyle: 'bold',
    fontSize: '18px',
    fontWeight: '500',
    textAlignment: 'Center',
    margin: { bottom: 20 }
  };
}

Title with Border and Background

titleStyle = {
  color: '#FFFFFF',
  backgroundColor: { color: '#3F51B5' },
  border: { color: '#000', width: 1 },
  padding: { bottom: 10, top: 10, left: 10, right: 10 },
  borderRadius: 5
};

Subtitles

Basic Subtitle

Add a subtitle below the main title:

<ejs-accumulationchart 
  [title]="'Sales Analysis'"
  [subTitle]="'Q4 2024 Performance'">
  <e-accumulation-series [dataSource]="data">
  </e-accumulation-series>
</ejs-accumulationchart>

Styled Subtitle

@Component({
  template: `
    <ejs-accumulationchart 
      [title]="mainTitle"
      [subTitle]="subTitleText"
      [subTitleStyle]="subtitleStyle">
      <e-accumulation-series [dataSource]="data">
      </e-accumulation-series>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  mainTitle = 'Revenue Analysis';
  subTitleText = 'Fourth Quarter Results';
  
  subtitleStyle = {
    color: '#666',
    fontFamily: 'Arial',
    fontSize: '14px',
    fontStyle: 'italic',
    margin: { bottom: 10 }
  };
}

Center Labels

Center Label (Doughnut Only)

Display content in the hollow center of a doughnut chart:

@Component({
  template: `
    <div class="chart-container">
      <ejs-accumulationchart id="container">
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y"
          type="Doughnut">
        </e-accumulation-series>
      </ejs-accumulationchart>
      
      <!-- Center label overlay -->
      <div class="center-label">
        <div class="metric">$156,000</div>
        <div class="label">Total Sales</div>
      </div>
    </div>
  `,
  styles: [`
    .chart-container {
      position: relative;
      height: 420px;
      width: 100%;
    }
    #container {
      height: 100%;
      width: 100%;
    }
    .center-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: none;
    }
    .metric {
      font-size: 28px;
      font-weight: bold;
      color: #333;
    }
    .label {
      font-size: 14px;
      color: #999;
      margin-top: 5px;
    }
  `]
})
export class DoughnutComponent {
  data = [
    { x: 'Product A', y: 45000 },
    { x: 'Product B', y: 60000 },
    { x: 'Product C', y: 51000 }
  ];
}

Dynamic Center Label with Calculation

@Component({
  template: `
    <div class="chart-container">
      <ejs-accumulationchart id="container"
        (pointRender)="onPointRender($event)">
        <e-accumulation-series [dataSource]="data" type="Doughnut">
        </e-accumulation-series>
      </ejs-accumulationchart>
      
      <div class="center-label">
        <div class="metric">{{ totalValue | currency }}</div>
        <div class="label">Total</div>
        <div class="percentage">{{ percentageText }}</div>
      </div>
    </div>
  `,
  styles: [`
    .chart-container { position: relative; height: 420px; }
    .center-label { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%);
      text-align: center;
    }
  `]
})
export class DynamicCenterComponent implements OnInit {
  data = [
    { x: 'North', y: 50000 },
    { x: 'South', y: 70000 },
    { x: 'East', y: 60000 }
  ];
  
  totalValue = 0;
  percentageText = '100%';

  ngOnInit() {
    this.calculateTotal();
  }

  calculateTotal() {
    this.totalValue = this.data.reduce((sum, item) => sum + item.y, 0);
  }

  onPointRender(args: IAccPointRenderEventArgs) {
    // Optional: customize point rendering
  }
}

Chart Center Positioning

You can reposition the chart using center coordinates.

APIs:

• center: { x: string | number, y: string | number }
• centerX: string | number
• centerY: string | number

<ejs-accumulationchart center="20%, 40%">
</ejs-accumulationchart>

This is useful for custom layouts, overlay text, and off-centered doughnut designs.

Annotations Overview

What Are Annotations?

Annotations are text, shapes, or images placed on the chart to highlight or explain specific areas or data points.

Types of Annotations

1. Text Annotations - Add text labels or notes 2. Image Annotations - Add images to chart area 3. Positional Annotations - Place annotations at specific coordinates

Text Annotations

Basic Text Annotation

interface TextAnnotation {
  content: string | HTMLElement;     // Text or HTML content
  x: string | number;                // X position (pixel or percentage)
  y: string | number;                // Y position
  coordinateUnits: 'Pixel' | 'Point'; // Position reference
  region: 'Series' | 'Chart';        // Placement area
  horizontalAlignment: 'Left' | 'Center' | 'Right';
  verticalAlignment: 'Top' | 'Middle' | 'Bottom';
  enableAnimation: boolean;
  textStyle: object;                 // Font styling
}

Simple Text Annotation

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

@Component({
  standalone: true,
  selector: 'app-simple-text-annotation',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationAnnotationService],
  template: `
    <ejs-accumulationchart>
      <e-accumulation-annotations>
        <e-accumulation-annotation 
          content="Peak Sales"
          x="50%"
          y="25%"
          coordinateUnits="Pixel"
          horizontalAlignment="Center">
        </e-accumulation-annotation>
      </e-accumulation-annotations>
      
      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data" xName="x" yName="y">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class SimpleTextAnnotationComponent {
  data = [
    { x: 'A', y: 25 },
    { x: 'B', y: 65 },
    { x: 'C', y: 40 }
  ];
}

Styled Text Annotation

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

@Component({
  standalone: true,
  selector: 'app-annotated-chart',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationAnnotationService],
  template: `
    <ejs-accumulationchart>
      <e-accumulation-annotations>
        <e-accumulation-annotation 
          [content]="annotationContent"
          x="50%"
          y="30%"
          horizontalAlignment="Center">
        </e-accumulation-annotation>
      </e-accumulation-annotations>

      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data" xName="x" yName="y">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class AnnotatedChartComponent {
  annotationContent = `
    <div style="
      color:#FF6B6B;
      font-family:'Segoe UI';
      font-size:14px;
      font-weight:bold;
      background:#FFFFCC;
      padding:5px 10px;
      border-radius:5px;">
      ⭐ Q4 Peak
    </div>
  `;

  data = [
    { x: 'Q1', y: 30000 },
    { x: 'Q4', y: 95000 }
  ];
}

Image Annotations

Add Image Annotation

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

@Component({
  standalone: true,
  selector: 'app-image-annotation',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationAnnotationService],
  template: `
    <ejs-accumulationchart>
      <e-accumulation-annotations>
        <e-accumulation-annotation 
          content="<img src='image.png' width='30' height='30'/>"
        </e-accumulation-annotation>
      </e-accumulation-annotations>
  
      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data" xName="x" yName="y">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ImageAnnotationComponent {
  data = [
    { x: 'A', y: 25 },
    { x: 'B', y: 65 },
    { x: 'C', y: 40 }
  ];
}

Image Annotation Component

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

@Component({
  standalone: true,
  selector: 'app-annotated-image-chart',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationAnnotationService],
  template: `
    <ejs-accumulationchart>
      <e-accumulation-annotations>
        <e-accumulation-annotation 
          *ngFor="let ann of annotations"
          [content]="ann.content"
          [x]="ann.x"
          [y]="ann.y"
          coordinateUnits="Pixel"
          horizontalAlignment="Center">
        </e-accumulation-annotation>
      </e-accumulation-annotations>

      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data" xName="x" yName="y">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class AnnotatedImageChartComponent {
  annotations = [
    {
      content: '<img src="assets/star.png" width="30">',
      x: '50%',
      y: '15%'
    },
    {
      content: '<img src="assets/arrow.png" width="40">',
      x: '75%',
      y: '40%'
    }
  ];

  data = [
    { x: 'A', y: 25 },
    { x: 'B', y: 65 },
    { x: 'C', y: 40 }
  ];
}

Annotation Positioning

Coordinate Units

Pixel: Position relative to chart container

<e-accumulation-annotation 
  content="Pixel Positioned"
  x="100"
  y="150"
  coordinateUnits="Pixel">
</e-accumulation-annotation>

Point: Position relative to data coordinates (if applicable)

<e-accumulation-annotation 
  content="Point Positioned"
  x="Jan"
  y="3"
  coordinateUnits="Point"
  region="Series">
</e-accumulation-annotation>

Note - For coordinateUnits="Point", use region="Series" and ensure the x and y values match an actual point in the series data. If point-based placement does not render reliably as expected in your environment, use coordinateUnits="Pixel" with region="Chart" as a fallback.

Alignment Options

Horizontal Alignment:

• Left - Align left
• Center - Center horizontally (default)
• Right - Align right

Vertical Alignment:

• Top - Align to top
• Middle - Center vertically (default)
• Bottom - Align to bottom

Combined Positioning Example

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

@Component({
  standalone: true,
  selector: 'app-annotation-positioning',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationAnnotationService],
  template: `
    <ejs-accumulationchart>
      <e-accumulation-annotations>
        <!-- Top-left -->
        <e-accumulation-annotation 
          content="Top Left"
          x="10"
          y="10"
          coordinateUnits="Pixel"
          horizontalAlignment="Left"
          verticalAlignment="Top">
        </e-accumulation-annotation>
        
        <!-- Center -->
        <e-accumulation-annotation 
          content="Center"
          x="50%"
          y="50%"
          coordinateUnits="Pixel"
          horizontalAlignment="Center"
          verticalAlignment="Middle">
        </e-accumulation-annotation>
        
        <!-- Bottom-right -->
        <e-accumulation-annotation 
          content="Bottom Right"
          x="95%"
          y="95%"
          coordinateUnits="Pixel"
          horizontalAlignment="Right"
          verticalAlignment="Bottom">
        </e-accumulation-annotation>
      </e-accumulation-annotations>
      
      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data" xName="x" yName="y">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class AnnotationPositioningComponent {
  data = [
    { x: 'A', y: 25 },
    { x: 'B', y: 65 },
    { x: 'C', y: 40 }
  ];
}

Advanced Annotation Examples

Example 1: KPI Dashboard with Annotations

import { Component } from '@angular/core';
import {
  AccumulationChartModule,
  PieSeriesService,
  AccumulationAnnotationService,
  AccumulationDataLabelService
} from '@syncfusion/ej2-angular-charts';

@Component({
  standalone: true,
  selector: 'app-kpi-chart',
  imports: [AccumulationChartModule],
  providers: [
    PieSeriesService,
    AccumulationAnnotationService,
    AccumulationDataLabelService
  ],
  template: `
    <ejs-accumulationchart 
      id="container"
      [title]="'Sales Performance KPI'"
      [subTitle]="'Quarterly Comparison'">
      
      <e-accumulation-annotations>
        <e-accumulation-annotation 
          content="<div class='kpi-annotation'><span>$450K</span></div>"
          x="30%"
          y="10%"
          coordinateUnits="Pixel">
        </e-accumulation-annotation>
        
        <e-accumulation-annotation 
          content="<div class='kpi-annotation success'>↑ 23%</div>"
          x="70%"
          y="10%"
          coordinateUnits="Pixel">
        </e-accumulation-annotation>
      </e-accumulation-annotations>
      
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="kpiData"
          xName="quarter"
          yName="sales"
          type="Pie"
          [dataLabel]="{ visible: true }">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `,
  styles: [`
    #container { height: 420px; }
    .kpi-annotation {
      background: #F0F0F0;
      padding: 10px 15px;
      border-radius: 5px;
      font-weight: bold;
    }
    .kpi-annotation.success {
      background: #D4EDDA;
      color: #155724;
    }
  `]
})
export class KPIDashboardComponent {
  kpiData = [
    { quarter: 'Q1', sales: 150000 },
    { quarter: 'Q2', sales: 200000 },
    { quarter: 'Q3', sales: 250000 },
    { quarter: 'Q4', sales: 310000 }
  ];
}

Example 2: Trend Annotation on Doughnut

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

@Component({
  standalone: true,
  selector: 'app-trend-annotation',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationAnnotationService],
  template: `
    <div class="chart-container">
      <ejs-accumulationchart id="container">
        <e-accumulation-annotations>
          <e-accumulation-annotation 
            *ngIf="showTrendAnnotation"
            [content]="trendContent"
            x="50%"
            y="40%"
            coordinateUnits="Pixel">
          </e-accumulation-annotation>
        </e-accumulation-annotations>
        
        <e-accumulation-series-collection>
          <e-accumulation-series
            [dataSource]="monthlyData"
            xName="month"
            yName="revenue"
            type="Doughnut">
          </e-accumulation-series>
        </e-accumulation-series-collection>
      </ejs-accumulationchart>
    </div>
  `
})
export class TrendAnnotationComponent {
  showTrendAnnotation = true;
  trendContent = `
    <div style="
      color: #28A745;
      font-weight: bold;
      background: #EAF8EE;
      border: 1px solid #28A745;
      border-radius: 8px;
    ">
      <span>📈 Uptrend</span>
    </div>
  `;

  monthlyData = [
    { month: 'Jan', revenue: 45000 },
    { month: 'Feb', revenue: 52000 },
    { month: 'Mar', revenue: 68000 }
  ];
}

Key Takeaways

• Titles & Subtitles: Provide context and clarity to charts
• Center Labels: Use with doughnut charts for central KPI display
• Text Annotations: Add explanatory notes or callouts
• Image Annotations: Highlight important areas with visual markers
• Positioning: Use pixel or point coordinates for precise placement
• Styling: Customize fonts, colors, and backgrounds for visual hierarchy
• Accessibility: Ensure annotations are readable and don't obscure data

---

API Reference Summary

Annotation APIs

Title APIs

For complete API documentation, see: api-reference.md

Syncfusion Angular Accumulation Chart - API Reference Guide

This comprehensive guide catalogs all API references for the Syncfusion Angular Accumulation Chart component. All API documentation is available at https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/.

Table of Contents

• Core Component APIs
• Series Configuration APIs
• Data Label APIs
• Legend APIs
• Tooltip APIs
• Annotation APIs
• Selection APIs
• Animation and Appearance APIs
• Event APIs
• Enum Types
• Interface Types

---

Core Component APIs

AccumulationChart

The main chart component that renders accumulation visualizations.

---

Series Configuration APIs

AccumulationSeries

Configuration for individual accumulation series (Pie, Doughnut, Pyramid, Funnel).

Pyramid/Funnel Specific

---

Data Label APIs

AccumulationDataLabelSettings

Configuration for data labels on accumulation points.

---

Legend APIs

AccumulationLegendSettings

Legend configuration for accumulation charts.

---

Tooltip APIs

TooltipSettings

Tooltip configuration for accumulation charts.

---

Annotation APIs

AccumulationAnnotationSettings

Configuration for chart annotations.

---

Selection APIs

SelectionSettings

Configuration for point/series selection.

---

Animation and Appearance APIs

Animation

Appearance

---

Event APIs

Chart Events

---

Enum Types

AccumulationType

Chart series types.

AccumulationLabelPosition

Data label positioning.

LegendPosition

Legend placement options.

SelectionMode

Selection interaction modes.

PyramidMode

Pyramid rendering modes.

GroupMode

Data grouping modes.

---

Interface Types

Event Argument Interfaces

Model Interfaces

---

Quick Reference Links

Essential APIs

• AccumulationChart: https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChart
• AccumulationSeries: https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries
• Data Labels: https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings
• Legend: https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/legendSettings
• Tooltip: https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/tooltipSettings

Getting Started

• Main Index: https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/index-default
• Getting Started Guide: https://ej2.syncfusion.com/angular/documentation/accumulation-chart/getting-started

---

Navigation Tips:

• All links point to the official Syncfusion EJ2 Angular documentation
• Use Ctrl+F to search this document for specific APIs
• Click any "Documentation Link" to open the full API reference online
• Refer to interface types for TypeScript type definitions

Appearance and Styling

Table of Contents

• Color Palettes
• Custom Colors
• Themes
• Animation
• Gradients
• Custom CSS Styling
• Export and Print
• Advanced Styling Examples

Color Palettes

⚠️ NG8002 Error — Do NOT use `[palette]` on `<ejs-accumulationchart>`

In Angular strict template mode ("strictTemplates": true in tsconfig.json), binding

[palette]="myColors" on the chart element triggers:

```

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

```

Use `pointColorMapping` on the series with a `fill` field in your data instead.

See Custom Colors for the correct pattern.

Built-in Theme Palettes

Apply Syncfusion's built-in color palettes via the theme attribute:

<ejs-accumulationchart theme="Tailwind">
  <e-accumulation-series-collection>
    <e-accumulation-series [dataSource]="data" xName="x" yName="y">
    </e-accumulation-series>
  </e-accumulation-series-collection>
</ejs-accumulationchart>

Available Theme Options

Apply Theme

@Component({
  template: `
    <ejs-accumulationchart [theme]="selectedTheme">
      <e-accumulation-series-collection>
        <e-accumulation-series [dataSource]="data" xName="x" yName="y">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  selectedTheme = 'Tailwind'; // Material, Bootstrap, Fabric, etc.
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 }
  ];
}

Custom Colors

There are two valid, strict-template-safe ways to apply custom colors to accumulation chart segments.

---

Option A — [palettes] on the series (array of colors)

Pass a string[] to the [palettes] input on <e-accumulation-series>. Colors are applied to points cyclically — the simplest approach when your data objects don't carry color information:

import { Component, OnInit } from '@angular/core';
import {
  AccumulationChartModule,
  PieSeriesService,
  AccumulationLegendService,
  AccumulationTooltipService,
  AccumulationDataLabelService,
  AccumulationAnnotationService
} from '@syncfusion/ej2-angular-charts';

@Component({
  standalone: true,
  selector: 'app-container',
  imports: [AccumulationChartModule],
  providers: [
    PieSeriesService, AccumulationLegendService, AccumulationTooltipService,
    AccumulationDataLabelService, AccumulationAnnotationService
  ],
  template: `
    <ejs-accumulationchart id="chart-container" [legendSettings]="legendSettings">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="piedata"
          xName="x"
          yName="y"
          type="Pie"
          [palettes]="palette">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class AppComponent implements OnInit {
  piedata: object[] = [];
  legendSettings: object = { visible: false };
  palette: string[] = ['#E94649', '#F6B53F', '#6FAAB0', '#FF33F3', '#228B22', '#3399FF'];

  ngOnInit(): void {
    this.piedata = [
      { x: 'Chrome',  y: 37 },
      { x: 'Firefox', y: 28 },
      { x: 'Safari',  y: 18 },
      { x: 'Edge',    y: 10 },
      { x: 'IE',      y: 4  },
      { x: 'Others',  y: 3  }
    ];
  }
}

✅ [palettes] is a typed @Input() on AccumulationSeriesDirective — no NG8002 in strict mode.

---

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

Embed a fill field in each data object and reference it via pointColorMapping="fill". Use this when each data point needs an individually chosen color:

@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' },  // Red
    { x: 'B', y: 25, fill: '#4ECDC4' },  // Teal
    { x: 'C', y: 20, fill: '#45B7D1' },  // Blue
    { x: 'D', y: 15, fill: '#FFA07A' },  // Light Salmon
    { x: 'E', y: 10, fill: '#98D8C8' }   // Mint
  ];
}

---

Comparison

Why not `[palette]` on the chart element?

[palette] (singular) is not a typed @Input() on the Syncfusion Angular chart wrapper.

Angular's strict template checker raises NG8002 and the build fails. Use [palettes]

on the series or pointColorMapping instead.

Per-Point Custom Color

Style individual data points with custom colors:

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

  onPointRender(args: IAccumulationEventArgs) {
    // Apply custom color from data
    if (args.point.color) {
      args.fill = args.point.color;
    }
  }
}

Point Border Styling

Add borders and customize segment edges:

onPointRender(args: IAccumulationEventArgs) {
  args.border = {
    color: '#FFFFFF',    // White border
    width: 2
  };

  // Different border for specific points
  if (args.pointIndex === 0) {
    args.border.color = '#333';
    args.border.width = 3;
  }
}

Themes

Applying Themes

Syncfusion charts support multiple themes. Apply via CSS or programmatically:

Available Themes

• Material - Google Material Design
• Bootstrap - Bootstrap theme
• Fabric - Microsoft Office style
• Bootstrap4 - Bootstrap 4
• Tailwind - Tailwind CSS
• Highcontrast - High contrast for accessibility

Theme Configuration

<ejs-accumulationchart 
  theme="Material"
  [background]="'#f5f5f5'">
  <e-accumulation-series [dataSource]="data">
  </e-accumulation-series>
</ejs-accumulationchart>

Right‑to‑Left (RTL) Support

The chart supports RTL mode for languages read right-to-left.

API: enableRtl: boolean

// Enable RTL
import { enableRtl } from '@syncfusion/ej2-base';
enableRtl(true);

RTL affects:

• Legend alignment
• Tooltip direction
• Label flow

Animation

Enable Animation

Animate chart segments on load:

<ejs-accumulationchart>
  <e-accumulation-series
    [dataSource]="data"
    [animation]="{ enable: true, duration: 1000 }">
  </e-accumulation-series>
</ejs-accumulationchart>

Animation Properties

interface AnimationProperties {
  enable: boolean;           // Enable/disable animation
  duration: number;          // Animation duration in ms (default: 1000)
  delay: number;            // Delay before animation starts
  option: 'Rotate' | 'Zoom' | 'SlideForward'; // Animation type
}

Animation Options

Rotate: Segments rotate into place

[animation]="{ enable: true, option: 'Rotate', duration: 1500 }"

Zoom: Segments zoom into place

[animation]="{ enable: true, option: 'Zoom', duration: 1000 }"

SlideForward: Segments slide into place

[animation]="{ enable: true, option: 'SlideForward', duration: 1200 }"

Delayed Animation

@Component({
  template: `
    <ejs-accumulationchart>
      <e-accumulation-series
        [dataSource]="data"
        [animation]="animationConfig">
      </e-accumulation-series>
    </ejs-accumulationchart>
  `
})
export class ChartComponent {
  animationConfig = {
    enable: true,
    duration: 1500,
    delay: 500,     // Wait 500ms before animating
    option: 'Zoom'
  };

  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 }
  ];
}

Gradients

Linear Gradient Fill

Apply linear gradients to chart segments:

onPointRender(args: IAccumulationEventArgs) {
  args.fill = new LinearGradient(
    {
      colors: ['#FF6B6B', '#FFA07A']
    }
  );
}

Custom Gradient Configuration

@Component({
  template: `
    <ejs-accumulationchart (pointRender)="onPointRender($event)">
      <e-accumulation-series [dataSource]="data">
      </e-accumulation-series>
    </ejs-accumulationchart>
  `
})
export class GradientChartComponent {
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 }
  ];

  onPointRender(args: IAccumulationEventArgs) {
    // Apply gradient based on index
    const colors = [
      { startColor: '#FF6B6B', endColor: '#FF8E8E' },
      { startColor: '#4ECDC4', endColor: '#6FE5D8' },
      { startColor: '#45B7D1', endColor: '#6ECDE8' }
    ];

    const color = colors[args.pointIndex % colors.length];
    args.fill = new LinearGradient(
      {
        colors: [color.startColor, color.endColor],
        angle: 90
      }
    );
  }
}

Radial Gradient

For radial (circular) gradient effects:

onPointRender(args: IAccumulationEventArgs) {
  args.fill = new RadialGradient(
    {
      colors: ['#FF6B6B', '#FFFFFF'],
      angle: 45
    }
  );
}

Custom CSS Styling

Chart Container Styling

#container {
  height: 420px;
  width: 100%;
  border: 2px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Style Chart Elements

titleStyle = {
  color: '#333',
  fontFamily: 'Segoe UI',
  fontSize: '18px',
  fontWeight: 'bold',
  backgroundColor: '#F0F0F0',
  padding: { top: 10, bottom: 10, left: 10, right: 10 },
  borderRadius: 5
};

labelStyle = {
  color: '#666',
  fontFamily: 'Arial',
  fontSize: '12px',
  fontStyle: 'italic'
};

Apply Text Styles to Elements

<ejs-accumulationchart 
  [titleStyle]="titleStyle"
  [subTitleStyle]="subtitleStyle">
  <e-accumulation-legend [textStyle]="legendTextStyle">
  </e-accumulation-legend>
  <e-accumulation-series
    [dataLabel]="{ textStyle: labelStyle }">
  </e-accumulation-series>
</ejs-accumulationchart>

Chart Margin and Border

Margin

Controls the outer spacing around the chart.

API: margin: { left: number, right: number, top: number, bottom: number }

<ejs-accumulationchart
  [margin]="{ top: 20, bottom: 20 }">
</ejs-accumulationchart>

Border

Adds a border around the entire chart area.

API: border: { width: number, color: string }

<ejs-accumulationchart
  [border]="{ width: 1, color: '#ccc' }">
</ejs-accumulationchart>

Export and Print

Imports and Providers

import { Component, ViewChild } from '@angular/core';
import {
  AccumulationChartModule,
  PieSeriesService,
  AccumulationDataLabelService,
  ExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  standalone: true,
  selector: 'app-container',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationDataLabelService, ExportService],
  template: ``
})
export class AppComponent {}

Export to Image

Export chart as PNG, JPEG, SVG, or PDF:

import { Component, ViewChild } from '@angular/core';
import {
  AccumulationChartComponent,
  AccumulationChartModule,
  PieSeriesService,
  AccumulationDataLabelService,
  ExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  standalone: true,
  selector: 'app-export-chart',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationDataLabelService, ExportService],
  template: `
    <button (click)="exportChart()">Export as PNG</button>

    <ejs-accumulationchart #chart id="container">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class ExportChartComponent {
  @ViewChild('chart') chart!: AccumulationChartComponent;

  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 }
  ];

  exportChart() {
    this.chart?.export('PNG', 'accumulation-chart');
  }
}

Export Types

// PNG format
chart.export('PNG', 'chart-name');

// JPEG format
chart.export('JPEG', 'chart-name');

// SVG vector format
chart.export('SVG', 'chart-name');

// PDF format
chart.export('PDF', 'chart-name');

Print Chart

import { Component, ViewChild } from '@angular/core';
import {
  AccumulationChartComponent,
  AccumulationChartModule,
  PieSeriesService,
  AccumulationDataLabelService,
  ExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  standalone: true,
  selector: 'app-print-chart',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationDataLabelService, ExportService],
  template: `
    <button (click)="printChart()">Print</button>

    <ejs-accumulationchart #chart id="container">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `
})
export class PrintChartComponent {
  @ViewChild('chart') chart!: AccumulationChartComponent;

  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 }
  ];

  printChart() {
    this.chart?.print();
  }
}

Export Button Component

import { Component, ViewChild } from '@angular/core';
import {
  AccumulationChartModule,
  PieSeriesService,
  AccumulationDataLabelService,
  ExportService,
  AccumulationChartComponent
} from '@syncfusion/ej2-angular-charts';

@Component({
  standalone: true,
  selector: 'app-export-buttons',
  imports: [AccumulationChartModule],
  providers: [PieSeriesService, AccumulationDataLabelService, ExportService],
  template: `
    <div class="export-buttons">
      <button (click)="exportPNG()" class="btn btn-primary">
        📥 Export PNG
      </button>
      <button (click)="exportJPEG()" class="btn btn-secondary">
        📥 Export JPEG
      </button>
      <button (click)="exportSVG()" class="btn btn-secondary">
        📥 Export SVG
      </button>
      <button (click)="exportPDF()" class="btn btn-danger">
        📥 Export PDF
      </button>
      <button (click)="printChart()" class="btn btn-info">
        🖨️ Print
      </button>
    </div>
    
    <ejs-accumulationchart #chart id="container">
      <e-accumulation-series-collection>
        <e-accumulation-series
          [dataSource]="data"
          xName="x"
          yName="y">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  `,
  styles: [`
    .export-buttons { margin-bottom: 20px; }
    .btn { margin-right: 10px; padding: 8px 16px; }
  `]
})
export class ExportButtonsComponent {
  @ViewChild('chart') chart!: AccumulationChartComponent;

  data = [
    { x: 'Q1', y: 40 },
    { x: 'Q2', y: 50 },
    { x: 'Q3', y: 60 },
    { x: 'Q4', y: 75 }
  ];

  exportPNG() {
    this.chart?.export('PNG', 'quarterly-sales');
  }

  exportJPEG() {
    this.chart?.export('JPEG', 'quarterly-sales');
  }

  exportSVG() {
    this.chart?.export('SVG', 'quarterly-sales');
  }

  exportPDF() {
    this.chart?.export('PDF', 'quarterly-sales');
  }

  printChart() {
    this.chart?.print();
  }
}

Advanced Styling Examples

Example 1: Dashboard Style with Multiple Charts

@Component({
  selector: 'app-styled-dashboard',
  template: `
    <div class="dashboard-container">
      <div class="chart-card">
        <h3>Sales by Region</h3>
        <!-- Use pointColorMapping="fill" — NOT [palette] on the chart element -->
        <ejs-accumulationchart>
          <e-accumulation-series-collection>
            <e-accumulation-series
              [dataSource]="regionData"
              xName="x" yName="y"
              type="Pie"
              pointColorMapping="fill">
            </e-accumulation-series>
          </e-accumulation-series-collection>
        </ejs-accumulationchart>
      </div>
      
      <div class="chart-card">
        <h3>Product Distribution</h3>
        <ejs-accumulationchart>
          <e-accumulation-series-collection>
            <e-accumulation-series
              [dataSource]="productData"
              xName="x" yName="y"
              type="Pie"
              innerRadius="40%"
              pointColorMapping="fill">
            </e-accumulation-series>
          </e-accumulation-series-collection>
        </ejs-accumulationchart>
      </div>
    </div>
  `,
  styles: [`
    .dashboard-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      padding: 20px;
    }
    .chart-card {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .chart-card h3 {
      margin-top: 0;
      color: #333;
      font-size: 16px;
      font-weight: 600;
    }
  `]
})
export class StyledDashboardComponent {
  regionData = [
    { x: 'North', y: 45, fill: '#FF6B6B' },
    { x: 'South', y: 55, fill: '#4ECDC4' }
  ];

  productData = [
    { x: 'Product A', y: 35, fill: '#45B7D1' },
    { x: 'Product B', y: 30, fill: '#FFA07A' },
    { x: 'Product C', y: 35, fill: '#98D8C8' }
  ];
}

Example 2: Interactive Styling with State

@Component({
  template: `
    <ejs-accumulationchart
      (pointRender)="onPointRender($event)"
      (pointClick)="onPointClick($event)">
      <e-accumulation-series [dataSource]="styledData">
      </e-accumulation-series>
    </ejs-accumulationchart>
  `
})
export class InteractiveStyledComponent {
  selectedIndex: number | null = null;

  styledData = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 }
  ];

  onPointRender(args: IAccumulationEventArgs) {
    const isSelected = args.pointIndex === this.selectedIndex;
    
    if (isSelected) {
      args.fill = '#FF6B6B';
      args.border = { color: '#333', width: 3 };
    } else {
      args.fill = args.pointIndex % 2 === 0 ? '#4ECDC4' : '#45B7D1';
    }
  }

  onPointClick(args: IAccumulationEventArgs) {
    this.selectedIndex = args.pointIndex;
  }
}

Key Takeaways

• Palettes: Use predefined or custom color schemes
• Themes: Apply Material, Bootstrap, Fabric, or Tailwind themes
• Animation: Enhance UX with rotation, zoom, or slide animations
• Gradients: Add visual depth with linear or radial gradients
• Styling: Customize fonts, colors, backgrounds for all elements
• Export: Support PNG, JPEG, SVG, PDF export and printing
• Responsive: Combine CSS media queries for mobile-friendly styling

---

API Reference Summary

Appearance APIs

Animation APIs

Export/Print APIs

For complete API documentation, see: api-reference.md