Syncfusion Angular Circular 3d Chart

Implementing Syncfusion Angular Circular 3D Chart

When to Use This Skill

Use this skill when you need to:

• Create a 3D circular chart from scratch in an Angular application
• Display pie and donut charts for proportional data visualization
• Add and customize data labels with positioning and templates
• Handle empty data points gracefully in your chart
• Configure tooltips with custom formatting and templates
• Set up and customize legends for chart interactivity
• Add titles and subtitles to your visualizations
• Export or print charts as images or PDFs
• Ensure accessibility for keyboard navigation and screen readers

---

Component Overview

The Syncfusion Angular Circular 3D Chart component provides a powerful solution for creating three-dimensional pie and donut chart visualizations. It supports multiple data representations with interactive features including smart label positioning, custom data label templates, tooltip formatting, and comprehensive export capabilities. The component is designed for Angular 21+ with standalone architecture and includes accessibility features for inclusive user experiences.

Key Capabilities

• Chart Types: Pie and Donut charts with 3D perspective
• Data Labels: Automatic positioning, custom templates, connector lines, formatting options
• Empty Points: Intelligent handling of missing or zero-value data points
• Tooltips: Custom formatting, headers, and HTML templates
• Legends: Configurable positioning, interactions, and styling
• Titles: Main title and subtitle support with customization
• Export/Print: PNG, SVG, PDF formats with high-quality output
• Accessibility: WCAG compliance, keyboard navigation, ARIA attributes

---

Documentation and Navigation Guide

API Reference

📄 Read: references/api-reference.md

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Create your first 3D circular chart
• Basic component configuration
• CSS and theme imports
• Minimal working example

Pie vs Donut Configuration

📄 Read: references/pie-donut-types.md

• Pie chart implementation
• Donut chart implementation with innerRadius
• Converting between chart types
• Radius customization and various radius charts
• Series configuration and data mapping
• Point color mapping from data source

Data Labels & Empty Points

📄 Read: references/data-labels-empty-points.md

• Enable and position data labels (inside/outside)
• Data label formatting with templates
• Connector line customization
• Empty point detection and handling
• Point color customization
• Conditional display strategies

Interactivity: Tooltips, Legends & Selection

📄 Read: references/interactivity-legends-tooltips.md

• Enable and configure tooltips
• Tooltip headers and custom formatting
• Tooltip templates with HTML
• Legend positioning and customization
• Legend interactions (show/hide series)
• Point and series selection

Appearance, Titles & Styling

📄 Read: references/appearance-titles-styling.md

• Title and subtitle configuration
• Custom color palettes for series
• Point color customization
• Series styling options
• Theme application and customization
• Border and fill styling

Print, Export & Accessibility

📄 Read: references/print-export-accessibility.md

• Export charts as PNG, SVG, PDF
• Print functionality configuration
• WCAG 2.1 compliance guidelines
• Keyboard navigation support
• ARIA attributes and labels
• Screen reader optimization

---

Quick Start Example

Here's a minimal example to get you started:

import { Component } from '@angular/core';
import { CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective],
  template: `
    <ejs-circularchart3d id="container" [tooltip]="{ enable: true }">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series [dataSource]="chartData" xName="x" yName="y" type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class AppComponent {
  chartData = [
    { x: 'Product A', y: 25 },
    { x: 'Product B', y: 20 },
    { x: 'Product C', y: 30 },
    { x: 'Product D', y: 25 }
  ];
}

---

Common Patterns

Pattern 1: Pie Chart with Data Labels

When user needs proportional data visualization with clear labels:

@Component({
  template: `
    <ejs-circularchart3d>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="name" 
          yName="value" 
          type="Pie"
          [dataLabel]="{ visible: true, position: 'Outside', name: 'x' }">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class PieChartComponent {
  data = [
    { name: 'Sales', value: 40 },
    { name: 'Marketing', value: 30 },
    { name: 'Support', value: 20 },
    { name: 'Operations', value: 10 }
  ];
}

Pattern 2: Donut Chart with Legend and Tooltip

When user needs donut visualization with interactivity:

export class DonutChartComponent {
  @ViewChild('chart')
  public chart!: CircularChart3DComponent;

  data = [
    { x: 'Chrome', y: 45, color: '#5DADE2' },
    { x: 'Firefox', y: 25, color: '#F39C12' },
    { x: 'Safari', y: 20, color: '#48C9B0' },
    { x: 'Edge', y: 10, color: '#E74C3C' }
  ];

  seriesSettings = {
    dataSource: this.data,
    xName: 'x',
    yName: 'y',
    pointColorMapping: 'color',
    innerRadius: '50%',
    type: 'Pie'
  };

  tooltipSettings = {
    enable: true,
    format: '${point.x}: ${point.y}%'
  };

  legendSettings = {
    visible: true,
    position: 'Bottom'
  };
}

Pattern 3: Chart with Custom Data Label Templates

When user needs formatted labels with dynamic values:

export class CustomLabelChartComponent {
  data = [
    { category: 'Jan', sales: 35 },
    { category: 'Feb', sales: 28 },
    { category: 'Mar', sales: 34 }
  ];

  dataLabelTemplate = '<div>${point.x}: ${point.y}K</div>';

  dataLabelSettings = {
    visible: true,
    template: this.dataLabelTemplate,
    position: 'Outside'
  };
}

---

Key Props Reference

---

Common Use Cases

1. Market Share Distribution: Visualize product or service market share using pie charts 2. Budget Allocation: Show departmental budget breakdown with donut charts 3. User Demographics: Display audience distribution by region, age, or other categories 4. Sales Composition: Compare sales contribution by product line or territory 5. Quality Metrics: Represent quality issue categories as proportions 6. Survey Results: Visualize survey response distribution and percentages

---

For more information, visit the Syncfusion Angular Circular 3D Chart Documentation.

Circular 3D Chart API Reference

This document summarizes key properties, methods, and events for the CircularChart3DComponent with direct links to the official Syncfusion Angular API anchors.

• Base URL: https://ej2.syncfusion.com/angular/documentation/api/circularchart3d/index-default

Properties

• background — string
• backgroundImage — string
• border — BorderModel
• dataSource — Object | DataManager
• depth — number
• enableAnimation — boolean
• enableExport — boolean
• enablePersistence — boolean
• enableRotation — boolean
• enableRtl — boolean
• height — string
• highlightColor — string
• highlightMode — CircularChart3DHighlightMode
• highlightPattern — SelectionPattern
• isMultiSelect — boolean
• legendSettings — CircularChart3DLegendSettingsModel
• locale — string
• margin — MarginModel
• rotation — number
• selectedDataIndexes — [IndexesModel[]](https://ej2.syncfusion.com/angular/documentation/api/circularchart3d/indexesmodel)
• selectionMode — CircularChart3DSelectionMode
• selectionPattern — SelectionPattern
• series — [CircularChart3DSeriesModel[]](https://ej2.syncfusion.com/angular/documentation/api/circularchart3d/circularchart3dseriesmodel)
• subTitle / subTitleStyle — string / FontModel
• theme — CircularChart3DTheme
• tilt — number
• title / titleStyle — string / FontModel
• tooltip — CircularChart3DTooltipSettingsModel
• useGroupingSeparator — boolean
• width — string

Methods

• export(type: ExportType, fileName: string) — Export chart as image - Refer link
• pdfExport(...) — Export chart to PDF (supports options) - Refer link
• print(id?: string[]) — Print chart element(s) - Refer link

Events

• afterExport — CircularChart3DAfterExportEventArgs
• beforeExport — CircularChart3DExportEventArgs
• beforePrint — CircularChart3DPrintEventArgs
• beforeResize — CircularChart3DBeforeResizeEventArgs
• circularChart3DMouseClick — CircularChart3DMouseEventArgs
• circularChart3DMouseDown — CircularChart3DMouseEventArgs
• circularChart3DMouseLeave — CircularChart3DMouseEventArgs
• circularChart3DMouseMove — CircularChart3DMouseEventArgs
• circularChart3DMouseUp — CircularChart3DMouseEventArgs
• legendClick — CircularChart3DLegendClickEventArgs
• legendRender — CircularChart3DLegendRenderEventArgs
• load / loaded — CircularChart3DLoadedEventArgs
• pointClick / pointMove — CircularChart3DPointEventArgs
• pointRender — CircularChart3DPointRenderEventArgs
• resized — CircularChart3DResizeEventArgs
• selectionComplete — CircularChart3DSelectionCompleteEventArgs
• seriesRender — CircularChart3DSeriesRenderEventArgs
• textRender — CircularChart3DTextRenderEventArgs
• tooltipRender — CircularChart3DTooltipRenderEventArgs

--- Generated from: https://ej2.syncfusion.com/angular/documentation/api/circularchart3d/index-default

Appearance, Titles & Styling

Table of Contents

• Title Configuration
• Add Chart Title
• Add Subtitle
• Color Palettes
• Apply Predefined Palettes
• Common Palettes
• Map Colors from Data
• Point Customization
• Customize Individual Points
• Point Opacity
• Series Styling
• Configure Series Appearance
• Explode Slices
• Explode All Slices
• Theme Application
• Available Themes
• Border and Fill Styling
• Chart Background
• Advanced Appearance
• Dynamic Styling Based on Data
• Troubleshooting

---

Title Configuration

Add Chart Title

Display a main title for your chart:

import { Component } from '@angular/core';
import { CircularChart3DAllModule  } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-chart-title',
  standalone: true,
  imports: [
    CircularChart3DAllModule 
  ],
  template: `
    <ejs-circularchart3d 
      id="chart" 
      title="Sales Distribution by Region"
      [titleStyle]="{ 
        fontFamily: 'Arial',
        fontStyle: 'Normal',
        fontWeight: 'bold',
        size: '18px',
        color: '#333',
        opacity: 0.5,
        textAlignment: 'Center',
        textOverflow": 'Wrap'
      }">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="region" 
          yName="sales" 
          type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class ChartTitleComponent {
  data = [
    { region: 'North', sales: 35 },
    { region: 'South', sales: 28 },
    { region: 'East', sales: 34 },
    { region: 'West', sales: 32 }
  ];
}

Add Subtitle

Display a subtitle below the main title:

@Component({
  template: `
    <ejs-circularchart3d 
      title="Sales Distribution"
      subTitle="Q4 2025 Results"
      [subTitleStyle]="{ 
        size: '14px',
        color: '#666',
        fontStyle: 'Italic'
      }">
      ...
    </ejs-circularchart3d>
  `
})
export class SubtitleComponent {}

---

Color Palettes

Apply Predefined Palettes

Use built-in color schemes:

@Component({
  template: `
    <ejs-circularchart3d [palettes]="['#5DADE2', '#F39C12', '#48C9B0', '#E74C3C', '#9B59B6']">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="category" 
          yName="value" 
          type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class PaletteComponent {
  data = [
    { category: 'A', value: 25 },
    { category: 'B', value: 20 },
    { category: 'C', value: 30 },
    { category: 'D', value: 15 },
    { category: 'E', value: 10 }
  ];
}

Common Palettes

Material Design Colors:

palettes = [
  '#2196F3', '#FF5722', '#00BCD4', '#FF9800', '#9C27B0', '#8BC34A'
]

Pastel Colors:

palettes = [
  '#FFB3BA', '#FFCCCB', '#FFDFBA', '#FFFFBA', '#BAFFC9', '#BAE1FF'
]

Vibrant Colors:

palettes = [
  '#FF3333', '#FF6600', '#FFFF00', '#00CC00', '#0066FF', '#9933FF'
]

Map Colors from Data

Assign colors from data source:

@Component({
  template: `
    <ejs-circularchart3d 
      [palettes]="customPalette">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="coloredData" 
          xName="item" 
          yName="value" 
          type="Pie"
          pointColorMapping="color">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class DataColorMappingComponent {
  customPalette = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'];

  coloredData = [
    { item: 'Product A', value: 35, color: '#FF6B6B' },
    { item: 'Product B', value: 25, color: '#4ECDC4' },
    { item: 'Product C', value: 40, color: '#45B7D1' }
  ];
}

---

Point Customization

Customize Individual Points

Modify appearance of specific data points:

@Component({
  template: `
    <ejs-circularchart3d 
      (pointRender)="onPointRender($event)">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class PointCustomizationComponent {
  data = [
    { x: 'Q1', y: 25 },
    { x: 'Q2', y: 28 },
    { x: 'Q3', y: 22 },
    { x: 'Q4', y: 35 }
  ];

  onPointRender(args: any) {
    // Highlight Q4 (highest value)
    if (args.point.y === 35) {
      args.fill = '#FF6B6B';
      args.border = { color: '#B00000', width: 2 };
    }
  }
}

Point Opacity

Control transparency of individual points:

onPointRender(args: any) {
  // Make smaller values more transparent
  if (args.point.y < 20) {
    args.opacity = 0.6;  // 60% opaque
  } else {
    args.opacity = 1;    // 100% opaque
  }
}

---

Series Styling

Configure Series Appearance

Style the entire series:

@Component({
  template: `
    <ejs-circularchart3d id="chart">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="category" 
          yName="value" 
          type="Pie"
          [cornerRadius]="5"
          [explode]="false"
          opacity="0.9"
          pointColorMapping="color">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class SeriesStyleComponent {
  data = [
    { category: 'A', value: 30, color: '#5DADE2' },
    { category: 'B', value: 25, color: '#F39C12' },
    { category: 'C', value: 20, color: '#48C9B0' }
  ];
}

Explode Slices

Separate slices from center on click or interaction:

@Component({
  template: `
    <ejs-circularchart3d 
      id="chart"
      (pointClick)="onPointClick($event)">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Pie"
          [explodeAll]="false"
          explodeOffset="20px">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class ExplodeSlicesComponent {
  data = [
    { x: 'A', y: 30 },
    { x: 'B', y: 25 },
    { x: 'C', y: 20 }
  ];

  onPointClick(args: any) {
    // args.point is the clicked point
    args.point.explode = true;
  }
}

Explode All Slices

Separate all slices automatically:

@Component({
  template: `
    <ejs-circularchart3d>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [explodeAll]="true"
          explodeOffset="30px"
          type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})

---

Theme Application

Available Themes

Syncfusion provides multiple built-in themes. Select in styles.css:

/* Material Theme (default) */
@import '../node_modules/@syncfusion/ej2-charts/styles/material.css';

/* Bootstrap Theme */
@import '../node_modules/@syncfusion/ej2-charts/styles/bootstrap.css';

/* Bootstrap 4 Theme */
@import '../node_modules/@syncfusion/ej2-charts/styles/bootstrap4.css';

/* Fabric Theme */
@import '../node_modules/@syncfusion/ej2-charts/styles/fabric.css';

/* Highcontrast Theme */
@import '../node_modules/@syncfusion/ej2-charts/styles/highcontrast.css';

/* Tailwind CSS Theme */
@import '../node_modules/@syncfusion/ej2-charts/styles/tailwind.css';

---

Border and Fill Styling

Chart Background

Set chart background color and border:

@Component({
  template: `
    <ejs-circularchart3d 
      id="chart"
      background="red"
      [border]="{
        color: 'yellow',
        width: 20
      }">
      ...
    </ejs-circularchart3d>
  `
})

---

Advanced Appearance

Dynamic Styling Based on Data

Apply styles conditionally:

@Component({
  template: `
    <ejs-circularchart3d 
      (pointRender)="onPointRender($event)">
      ...
    </ejs-circularchart3d>
  `
})
export class DynamicStylingComponent {
  data = [
    { x: 'Excellent', y: 60 },
    { x: 'Good', y: 25 },
    { x: 'Poor', y: 15 }
  ];

  onPointRender(args: any) {
    // Color coding based on value
    if (args.point.y >= 50) {
      args.fill = '#48C9B0';  // Green for high values
    } else if (args.point.y >= 25) {
      args.fill = '#F39C12';  // Orange for medium
    } else {
      args.fill = '#E74C3C';  // Red for low
    }
  }
}

---

Troubleshooting

Title not showing?

• Set title property on chart component
• Verify titleStyle is valid CSS
• Check that title text is not empty

Colors not applying?

• Check color values are valid hex or named colors
• Verify pointColorMapping property name matches data
• Ensure palette array is properly formatted

Theme not changing?

• Verify CSS import statement is correct
• Clear browser cache
• Check for CSS specificity issues
• Ensure theme CSS is loaded after default styles

---

Data Labels & Empty Points

Table of Contents

• Enable Data Labels
• Basic Data Label Setup
• Data Label Properties
• Label Positioning
• Inside Position
• Outside Position
• Data Label Templates
• Display Custom Values
• Template Variables
• Complex Template Example
• Formatting Numbers
• Connector Lines
• Enable Connector Lines
• Connector Line Options
• Empty Point Handling
• Detect Empty Points
• Configure Empty Point Behavior
• Empty Point Modes
• Example Handle Missing Data
• Point Customization
• Individual Point Colors
• Point Borders
• Advanced Scenarios
• Dynamic Label Updates
• Troubleshooting

---

Enable Data Labels

Basic Data Label Setup

Enable labels with the default configuration:

import { Component } from '@angular/core';
import { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-data-labels',
  standalone: true,
  imports: [
    CircularChart3DAllModule
  ],
  template: `
    <ejs-circularchart3d id="chart">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="chartData" 
          xName="category" 
          yName="value" 
          type="Pie"
          [dataLabel]="{ visible: true }">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class DataLabelsComponent {
  chartData = [
    { category: 'Chrome', value: 48 },
    { category: 'Firefox', value: 20 },
    { category: 'Safari', value: 18 },
    { category: 'Edge', value: 14 }
  ];
}

Data Label Properties

dataLabel = {
  visible: true,                    // Enable/disable labels
  position: 'Inside',              // 'Inside' or 'Outside'
  name: 'category',                // Property to display as text
  font: { size: '14px', bold: true },
  border: { width: 1, color: '#ccc' },
  fill: '#ffffff',
  angle: 30,
  enableRotation: true
}

---

Label Positioning

Inside Position

Place labels inside the pie slices:

@Component({
  template: `
    <ejs-circularchart3d id="chart">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Pie"
          [dataLabel]="{ visible: true, position: 'Inside', name: 'x' }">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class InsideLabelsComponent {
  data = [
    { x: 'Q1', y: 25 },
    { x: 'Q2', y: 28 },
    { x: 'Q3', y: 22 },
    { x: 'Q4', y: 25 }
  ];
}

Use Inside position when:

• You want compact labels without extra space
• All slices are large enough to fit text
• You prefer minimal visual clutter

Outside Position

Place labels outside slices with connector lines:

@Component({
  template: `
    <ejs-circularchart3d id="chart">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="category" 
          yName="percentage" 
          type="Pie"
          [dataLabel]="{ 
            visible: true, 
            position: 'Outside', 
            name: 'category',
            connectorStyle: { type: 'Line', color: '#999' }
          }">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class OutsideLabelsComponent {
  data = [
    { category: 'North', percentage: 25 },
    { category: 'South', percentage: 20 },
    { category: 'East', percentage: 30 },
    { category: 'West', percentage: 25 }
  ];
}

Use Outside position when:

• Slices are small and labels won't fit inside
• You need to label all points clearly
• You want a clear visual hierarchy

---

Data Label Templates

Display Custom Values

Show calculated or formatted values:

@Component({
  template: `
    <ejs-circularchart3d id="chart">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="category" 
          yName="value" 
          type="Pie"
          [dataLabel]="{ 
            visible: true, 
            template: '<div>${point.x}: ${point.y}%</div>'
          }">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class TemplateLabelsComponent {
  data = [
    { category: 'Product A', value: 35 },
    { category: 'Product B', value: 25 },
    { category: 'Product C', value: 40 }
  ];
}

Template Variables

Available placeholder variables in templates:

Complex Template Example

template = `
  <div style="
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px;
    border-radius: 4px;
    font-weight: bold;
  ">
    <div>${point.x}</div>
    <div>${point.y} items</div>
    <div>${point.percentage}%</div>
  </div>
`;

Formatting Numbers

Format numeric values in labels:

@Component({
imports: [
         CircularChart3DAllModule
    ],

providers: [CircularChart3DAllModule],
standalone: true,
    selector: 'app-container',
    template: `<ejs-circularchart3d style='display:block;' align='center' [tilt]='tilt' [legendSettings]="legendSettings">
    <e-circularchart3d-series-collection>
    <e-circularchart3d-series [dataSource]='dataSource' xName='x' yName='y' [dataLabel]='dataLabel'>
    </e-circularchart3d-series></e-circularchart3d-series-collection>
    </ejs-circularchart3d>`
})
export class AppComponent implements OnInit {
    public dataSource?: Object[];
    public legendSettings?: Object;
    public dataLabel?: Object;
    public tilt?: number;
    ngOnInit(): void {
        this.dataSource = [
          { x: 'Jan', y: 13, text: 'Jan: 13' }, 
          { x: 'Feb', y: 13, text: 'Feb: 13' },
          { x: 'Mar', y: 17, text: 'Mar: 17' }, 
          { x: 'Apr', y: 13.5, text: 'Apr: 13.5' }];
        this.legendSettings = { visible: false };
        this.dataLabel = {
          visible: true,
          format: 'n2'
        };
        this.tilt= -45
    }
}

---

Connector Lines

Enable Connector Lines

Connector lines connect outside labels to their slices:

@Component({
imports: [
         CircularChart3DAllModule
    ],

providers: [CircularChart3DAllModule],
standalone: true,
    selector: 'app-container',
    template: `<ejs-circularchart3d style='display:block;' align='center' [tilt]='tilt' [legendSettings]="legendSettings">
    <e-circularchart3d-series-collection>
    <e-circularchart3d-series [dataSource]='dataSource' xName='x' yName='y' [dataLabel]='dataLabel'>
    </e-circularchart3d-series></e-circularchart3d-series-collection>
    </ejs-circularchart3d>`
})
export class AppComponent implements OnInit {
    public dataSource?: Object[];
    public legendSettings?: Object;
    public dataLabel?: Object;
    public tilt?: number;
    ngOnInit(): void {
        this.dataSource = [
          { x: 'Jan', y: 13, text: 'Jan: 13' }, 
          { x: 'Feb', y: 13, text: 'Feb: 13' },
          { x: 'Mar', y: 17, text: 'Mar: 17' }, 
          { x: 'Apr', y: 13.5, text: 'Apr: 13.5' }];
        this.legendSettings = { visible: false };
        this.dataLabel = {
          visible: true,
          name: 'text',
          position: 'Outside',
          connectorStyle: {
            length: '50px',
            width: 2,                  
            color: '#f4429e',
            dashArray: '5,3'
          }
        };
        this.tilt= -45
    }
}

Connector Line Options

connectorStyle = {
  color: '#999',          // Connector line color
  width: 1,               // Line width in pixels
  length: '5',           // Length from point (px)
  dashArray: '',          // '2,2' for dashed, '5,5,2' for pattern
  opacity: 1              // Line opacity (0-1)
}

---

Empty Point Handling

Detect Empty Points

Empty points are data items with null or undefined values:

data = [
  { category: 'Q1', value: 25 },
  { category: 'Q2', value: null },      // Empty point
  { category: 'Q3', value: undefined }, // Empty point
  { category: 'Q4', value: 28 }
]

Configure Empty Point Behavior

@Component({
imports: [
         CircularChart3DAllModule
    ],

providers: [CircularChart3DAllModule],
standalone: true,
  selector: 'app-container',
  template: `<ejs-circularchart3d style='display:block;' align='center' [tilt]='tilt' [legendSettings]="legendSettings">
    <e-circularchart3d-series-collection>
    <e-circularchart3d-series [dataSource]='dataSource' xName='x' yName='y' [emptyPointSettings]='emptyPointSettings' [dataLabel]='dataLabel'>
    </e-circularchart3d-series></e-circularchart3d-series-collection>
    </ejs-circularchart3d>`
})
export class AppComponent {
  ...
  this.emptyPointSettings = { mode: 'Zero' };

}

Empty Point Modes

Example: Handle Missing Data

@Component({
  selector: 'app-empty-points',
  template: `
    <ejs-circularchart3d id="chart">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="salesData" 
          xName="month" 
          yName="sales" 
          type="Pie"
          [emptyPointSettings]="{
            mode: 'Gap',
            fill: '#f0f0f0',
          }">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class EmptyPointsComponent {
  salesData = [
    { month: 'Jan', sales: 1000 },
    { month: 'Feb', sales: null },      // Data not available
    { month: 'Mar', sales: 1500 },
    { month: 'Apr', sales: undefined }  // Data not available
  ];
}

---

Point Customization

Individual Point Colors

Customize color for each data point:

@Component({
  template: `
    <ejs-circularchart3d>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="coloredData" 
          xName="item" 
          yName="count" 
          type="Pie"
          pointColorMapping="customColor">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class PointColorsComponent {
  coloredData = [
    { item: 'A', count: 30, customColor: '#FF6B6B' },
    { item: 'B', count: 25, customColor: '#4ECDC4' },
    { item: 'C', count: 20, customColor: '#45B7D1' },
    { item: 'D', count: 25, customColor: '#FFA07A' }
  ];
}

Point Borders

Add borders to data points:

pointRender = {
  border: {
    color: '#fff',
    width: 2
  },
  rx: 0,
  ry: 0
}

---

Advanced Scenarios

Dynamic Label Updates

Update labels based on data changes:

export class DynamicLabelsComponent {
  data: any[] = [];
  labelFormat = '${point.x}: ${point.y}';

  updateChart(newData: any[]) {
    this.data = newData;
    // Chart re-renders with new data and labels
  }

  changeFormat() {
    // Switch between display formats
    this.labelFormat = this.labelFormat === '${point.x}: ${point.y}' 
      ? '${point.percentage}%' 
      : '${point.x}: ${point.y}';
  }
}

---

Troubleshooting

Labels overlapping?

• Use position: 'Outside' for clarity
• Enable enableSmartLabels: true
• Increase chart container size

Empty points showing?

• Verify data property names match (xName, yName)
• Check for null/undefined values
• Set emptyPointSettings.mode: 'Gap'

Template not rendering?

• Check template syntax for typos
• Verify placeholder variables are correct (${point.x}, ${point.y})
• Check browser console for errors

---

Getting Started with Angular 3D Circular Chart

Table of Contents

• Overview
• Installation
• Step 1: Add Syncfusion Charts Package
• Step 2: Verify Installation
• Create Your First Chart
• Import Components
• Create Template
• Add Data
• Basic Configuration
• Chart Sizing
• Enable Tooltips
• Add Legend
• CSS and Theme Setup
• Import Syncfusion Styles
• Available Themes
• Custom Styling
• Minimal Working Example
• Bootstrap Your Application
• Test Your Setup
• Troubleshooting
• Chart Not Displaying
• Missing Dependencies
• Performance Issues

---

Overview

The Syncfusion Angular 3D Circular Chart component enables you to create interactive pie and donut chart visualizations. This guide covers the essential setup steps and basic implementation for Angular 21+ applications using standalone components.

Prerequisites:

• Angular 21 or later
• Node.js and npm installed
• Basic knowledge of TypeScript and Angular

---

Installation

Step 1: Add Syncfusion Charts Package

Install the Syncfusion Angular charts package using the Angular CLI:

ng add @syncfusion/ej2-angular-charts

This command automatically:

• Adds the package to package.json with peer dependencies
• Imports necessary modules in your application
• Sets up required configuration files

Step 2: Verify Installation

Check that @syncfusion/ej2-angular-charts appears in your package.json:

{
  "dependencies": {
    "@syncfusion/ej2-angular-charts": "^25.1.35",
    "@syncfusion/ej2-base": "^25.1.35"
  }
}

---

Create Your First Chart

Import Components

Import the required components and services in your component:

import { Component } from '@angular/core';
import { CircularChart3DAllModule  } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-circular-chart',
  standalone: true,
  imports: [
    CircularChart3DAllModule ],
})
export class CircularChartComponent {}

Create Template

Add the chart template to your component:

@Component({
  template: `
    <ejs-circularchart3d id="chart-container" style="display: block;">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series [dataSource]="chartData" xName="x" yName="y" type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `,
  styles: [`
    #chart-container {
      width: 100%;
      height: 400px;
    }
  `]
})

Add Data

Define sample data for your chart:

export class CircularChartComponent {
  chartData = [
    { x: 'Product A', y: 25 },
    { x: 'Product B', y: 20 },
    { x: 'Product C', y: 30 },
    { x: 'Product D', y: 25 }
  ];
}

---

Basic Configuration

Chart Sizing

Configure chart dimensions via CSS styles or properties:

@Component({
  template: `
    <ejs-circularchart3d 
      id="chart" 
      [width]="'100%'" 
      [height]="'400px'">
      ...
    </ejs-circularchart3d>
  `
})

Or in your stylesheet:

#chart {
  width: 100%;
  height: 400px;
}

Enable Tooltips

Add basic tooltip functionality:

@Component({
  template: `
    <ejs-circularchart3d [tooltip]="{ enable: true }">
      ...
    </ejs-circularchart3d>
  `
})

Add Legend

Enable and position the legend:

@Component({
  template: `
    <ejs-circularchart3d [legendSettings]="{ visible: true, position: 'Bottom' }">
      ...
    </ejs-circularchart3d>
  `
})

---

CSS and Theme Setup

Import Syncfusion Styles

Add to your styles.css or styles.scss:

/* Syncfusion CSS imports */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-charts/styles/material.css';

Available Themes

Syncfusion provides multiple themes:

• material.css - Material Design (default)
• bootstrap.css - Bootstrap theme
• bootstrap4.css - Bootstrap 4 theme
• fabric.css - Fabric theme
• tailwind.css - Tailwind CSS theme

Choose one that matches your application design:

@import '../node_modules/@syncfusion/ej2-charts/styles/bootstrap.css';

Custom Styling

Override default styles in your component CSS:

.e-chart3d-container {
  background-color: #f5f5f5;
  border-radius: 8px;
}

.e-chart3d-tooltip {
  background-color: #333;
  color: white;
  border-radius: 4px;
}

---

Minimal Working Example

Here's a complete working example:

import { Component } from '@angular/core';
import { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CircularChart3DAllModule
  ],
  template: `
    <div style="text-align: center;">
      <h1>Sales Distribution</h1>
      <ejs-circularchart3d 
        id="chart-container"
        [tooltip]="{ enable: true }"
        [legendSettings]="{ visible: true, position: 'Bottom' }">
        <e-circularchart3d-series-collection>
          <e-circularchart3d-series 
            [dataSource]="chartData" 
            xName="x" 
            yName="y" 
            type="Pie">
          </e-circularchart3d-series>
        </e-circularchart3d-series-collection>
      </ejs-circularchart3d>
    </div>
  `,
  styles: [`
    #chart-container {
      width: 100%;
      height: 500px;
      margin: 20px 0;
    }
  `]
})
export class AppComponent {
  chartData = [
    { x: 'North', y: 35 },
    { x: 'South', y: 28 },
    { x: 'East', y: 34 },
    { x: 'West', y: 32 }
  ];
}

Bootstrap Your Application

Create main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Test Your Setup

Run the development server:

ng serve

Navigate to http://localhost:4200 to see your 3D circular chart.

---

Troubleshooting

Chart Not Displaying

• Verify CSS imports are included in styles.css
• Check browser console for errors
• Ensure data property has valid data format
• Check that container has defined height and width

Missing Dependencies

• Re-run ng add @syncfusion/ej2-angular-charts
• Verify all imports are correctly specified
• Check for typos in component selector names

Performance Issues

• For large datasets (>1000 points), consider aggregating data
• Use changeDetectionStrategy: ChangeDetectionStrategy.OnPush for better performance
• Lazy-load chart component if not needed immediately

---

Interactivity: Tooltips, Legends & Selection

Table of Contents

• Tooltip Configuration
• Enable Tooltips
• Tooltip Customization
• Tooltip Properties
• Format Placeholders
• Tooltip Templates
• HTML Template
• Dynamic Template Based on Data
• Legend Setup
• Enable Legend
• Legend Positioning
• Legend Customization
• Legend Properties
• Legend Interactions
• Toggle Series Visibility
• Legend Item Render Handler
• Point Selection
• Enable Point Selection
• Selection Styling
• Advanced Interactivity
• Highlight on Hover
• Track User Interactions
• Troubleshooting

---

Tooltip Configuration

Enable Tooltips

Enable basic tooltip functionality:

import { Component } from '@angular/core';
import { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-tooltip-chart',
  standalone: true,
  imports: [
    CircularChart3DAllModule
  ],
  template: `
    <ejs-circularchart3d id="chart" [tooltip]="{ enable: true }">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="chartData" 
          xName="category" 
          yName="value" 
          type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class TooltipChartComponent {
  chartData = [
    { category: 'Product A', value: 35 },
    { category: 'Product B', value: 25 },
    { category: 'Product C', value: 40 }
  ];
}

Tooltip Customization

@Component({
  template: `
    <ejs-circularchart3d 
      [tooltip]="{
        enable: true,
        header: 'Sales Details',
        format: '<b>${point.x}</b>: ${point.y} units',
        fill: '#333',
        textStyle: { color: 'white', size: '14px' },
        border: { width: 1, color: '#ccc' },
        opacity: 0.9
      }">
      ...
    </ejs-circularchart3d>
  `
})

Tooltip Properties

Format Placeholders

tooltip = {
  format: '${series.name} : ${point.x} - ${point.y}'
  // ${series.name}: Series name
  // ${point.x}: X value
  // ${point.y}: Y value
  // ${point.percentage}: Percentage of total
  // ${point.index}: Point index
}

---

Tooltip Templates

HTML Template

Use HTML for rich tooltip content:

import { Component, ViewChild } from '@angular/core';
import { CircularChart3DComponent } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-tooltip-template',
  standalone: true,
  imports: [CircularChart3DComponent],
  template: `
    <ejs-circularchart3d id="chart" #chart
      [tooltip]="{
        enable: true,
        template: tooltipTemplate
      }">
      ...
    </ejs-circularchart3d>
  `,
  styles: [`
    .tooltip-container {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 12px;
      border-radius: 8px;
      min-width: 200px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .tooltip-header {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 8px;
    }
    .tooltip-row {
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .tooltip-row:last-child {
      border-bottom: none;
    }
  `]
})
export class TooltipTemplateComponent {
  tooltipTemplate = `
    <div class="tooltip-container">
      <div class="tooltip-header">${point.x}</div>
      <div class="tooltip-row">
        <span>Value:</span>
        <strong>${point.y}</strong>
      </div>
      <div class="tooltip-row">
        <span>Percentage:</span>
        <strong>${point.percentage}%</strong>
      </div>
    </div>
  `;

  chartData = [
    { x: 'Product A', y: 35 },
    { x: 'Product B', y: 25 },
    { x: 'Product C', y: 40 }
  ];
}

Dynamic Template Based on Data

@Component({
  template: `
    <ejs-circularchart3d [tooltip]="tooltipSettings">
      ...
    </ejs-circularchart3d>
  `
})
export class DynamicTooltipComponent {
  tooltipSettings = {
    enable: true,
    template: this.getTooltipTemplate()
  };

  getTooltipTemplate() {
    return `
      <div style="padding: 10px; background: #f9f9f9; border-radius: 4px;">
        <p><strong>${point.x}</strong></p>
        <p>Count: ${point.y}</p>
        <p style="color: #666; font-size: 12px;">
          ${point.percentage}% of total
        </p>
      </div>
    `;
  }
}

---

Legend Setup

Enable Legend

Display legend showing all series:

@Component({
  template: `
    <ejs-circularchart3d 
      [legendSettings]="{ visible: true, position: 'Bottom' }">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Pie"
          name="Sales">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class LegendChartComponent {
  data = [
    { x: 'Q1', y: 25 },
    { x: 'Q2', y: 28 },
    { x: 'Q3', y: 22 },
    { x: 'Q4', y: 25 }
  ];
}

Legend Positioning

legendSettings = {
  visible: true,
  position: 'Bottom'        // 'Bottom', 'Top', 'Left', 'Right'
}

// Positions:
// - 'Top': Above chart
// - 'Bottom': Below chart (default)
// - 'Left': Left side
// - 'Right': Right side

Legend Customization

@Component({
  template: `
    <ejs-circularchart3d 
      [legendSettings]="{
        visible: true,
        position: 'Right',
        width: '200px',
        height: 'auto',
        alignment: 'Center',
        background: '#f5f5f5',
        border: { width: 1, color: '#ddd' },
        itemPadding: 12,
        textStyle: { 
          fontFamily: 'Arial',
          size: '13px',
          color: '#333'
        },
        toggleVisibility: true
      }">
      ...
    </ejs-circularchart3d>
  `
})

Legend Properties

---

Legend Interactions

Toggle Series Visibility

Allow users to show/hide series by clicking legend:

@Component({
  template: `
    <ejs-circularchart3d 
      [legendSettings]="{
        visible: true,
        toggleVisibility: true
      }">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="series1Data" 
          name="Series 1"
          type="Pie">
        </e-circularchart3d-series>
        <e-circularchart3d-series 
          [dataSource]="series2Data" 
          name="Series 2"
          type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class ToggleLegendComponent {
  series1Data = [{ x: 'A', y: 30 }];
  series2Data = [{ x: 'B', y: 25 }];
}

Legend Item Render Handler

Handle legend item selection:

@Component({
  template: `
    <ejs-circularchart3d 
      (legendItemRender)="onLegendItemRender($event)"
      [legendSettings]="{ visible: true }">
      ...
    </ejs-circularchart3d>
  `
})
export class LegendRenderComponent {
  onLegendItemRender(args: any) {
    // args.text: Legend item text
    // args.fill: Legend color
    // args.shape: Legend shape
    console.log('Legend item Rendered:', args.text);
  }
}

---

Point Selection

Enable Point Selection

Allow users to click and select points:

import { Component, ViewChild } from '@angular/core';
import { CircularChart3DComponent } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-selection',
  standalone: true,
  imports: [CircularChart3DComponent],
  template: `
    <div>
      <p>Selected Points: {{ selectedPoints }}</p>
      <ejs-circularchart3d id="chart" #chart
        [selectionMode]="'Point'"
        (pointRender)="onPointRender($event)">
        <e-circularchart3d-series-collection>
          <e-circularchart3d-series 
            [dataSource]="data" 
            xName="x" 
            yName="y" 
            type="Pie">
          </e-circularchart3d-series>
        </e-circularchart3d-series-collection>
      </ejs-circularchart3d>
    </div>
  `
})
export class PointSelectionComponent {
  @ViewChild('chart')
  chart!: CircularChart3DComponent;

  selectedPoints: string[] = [];

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

  onPointRender(args: any) {
    if (args.point.isSelected) {
      this.selectedPoints.push(args.point.x);
    }
  }
}

Selection Styling

@Component({
  template: `
    <ejs-circularchart3d 
      [selectionMode]="'Point'"
      [pointRender]="pointRenderSettings">
      ...
    </ejs-circularchart3d>
  `
})
export class SelectionStyleComponent {
  pointRenderSettings = {
    border: {
      color: '#333',
      width: 2
    },
    opacity: 0.8
  };
}

---

Advanced Interactivity

Highlight on Hover

Highlight points when hovering:

@Component({
  template: `
    <ejs-circularchart3d 
      id="chart-container"
      [highlightMode]="'Point'" 
      [highlightPattern]="'DiagonalForward'">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="chartData" 
          xName="x" 
          yName="y">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class HoverHighlightComponent {
  public chartData: Object[] = [
    { x: 'Tesla', y: 137429 },
    { x: 'Aion', y: 80308 },
    { x: 'Wuling', y: 76418 }
  ];
}

Track User Interactions

Monitor and respond to chart events:

@Component({
  template: `
    <ejs-circularchart3d 
      (pointRender)="onPointRender($event)"
      (seriesRender)="onSeriesRender($event)"
      (chartMouseClick)="onChartClick($event)">
      ...
    </ejs-circularchart3d>
  `
})
export class InteractionTrackingComponent {
  onPointRender(args: any) {
    console.log('Point rendered:', args.point.x, args.point.y);
  }

  onSeriesRender(args: any) {
    console.log('Series rendered:', args.series.name);
  }

  onChartClick(args: any) {
    console.log('Chart clicked at:', args.pageX, args.pageY);
  }
}

---

Troubleshooting

Tooltips not showing?

• Verify CircularChartTooltip3DService is provided
• Check that tooltip.enable: true
• Ensure (pointRender) event is bound correctly

Legend not displaying?

• Set legendSettings.visible: true
• Ensure series have name property
• Check legendSettings.position value

Selection not working?

• Verify selectionMode is set (e.g., 'Point')
• Check that click handler is properly bound
• Ensure point event listeners are attached

---

Pie vs Donut Configuration

Table of Contents

• Pie Chart Implementation
• Basic Pie Chart
• When to Use Pie Charts
• Donut Chart Implementation
• Basic Donut Chart
• Inner Radius Configuration
• Typical Configurations
• When to Use Donut Charts
• Converting Between Types
• Dynamic Type Switching
• Radius Customization
• Default Radius
• Custom Fixed Radius
• Various Radius Per Slice
• Series Configuration
• Key Series Properties
• Color Mapping
• Map Colors from Data Source
• Using Palettes
• Troubleshooting

---

Pie Chart Implementation

Basic Pie Chart

Create a simple pie chart by setting the series type to 'Pie':

import { Component } from '@angular/core';
import { CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective } from '@syncfusion/ej2-angular-charts';
import { PieSeries3DService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-pie-chart',
  standalone: true,
  imports: [
    CircularChart3DAllModule
  ],
  template: `
    <ejs-circularchart3d id="pie-container">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="pieData" 
          xName="country" 
          yName="gdp" 
          type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class PieChartComponent {
  pieData = [
    { country: 'USA', gdp: 26 },
    { country: 'China', gdp: 18 },
    { country: 'Japan', gdp: 9 },
    { country: 'Germany', gdp: 6 },
    { country: 'UK', gdp: 5 },
    { country: 'France', gdp: 4 },
    { country: 'Others', gdp: 32 }
  ];
}

When to Use Pie Charts

Use pie charts for:

• Part-to-whole relationships: Show how individual items make up a total
• Percentage distributions: Visualize market share or budget allocation
• Simple categories: 2-5 categories for clarity (avoid too many slices)
• Emphasis on single segments: Highlight one dominant category

Best practice: Limit to 5-7 slices for readability.

---

Donut Chart Implementation

Basic Donut Chart

Convert a pie to a donut by setting innerRadius property:

import { Component } from '@angular/core';
import { CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective } from '@syncfusion/ej2-angular-charts';
import { PieSeries3DService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-donut-chart',
  standalone: true,
  imports: [
    CircularChart3DComponent,
    CircularChartSeriesCollectionDirective,
    CircularChartSeriesDirective
  ],
  providers: [PieSeries3DService],
  template: `
    <ejs-circularchart3d id="donut-container">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="donutData" 
          xName="browser" 
          yName="users" 
          type="Pie"
          innerRadius="50%">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class DonutChartComponent {
  donutData = [
    { browser: 'Chrome', users: 48 },
    { browser: 'Firefox', users: 20 },
    { browser: 'Safari', users: 18 },
    { browser: 'Edge', users: 14 }
  ];
}

Inner Radius Configuration

The innerRadius property accepts percentage values (0-100%):

// Pie chart (no hole)
innerRadius = '0%';

// Donut with 40% hole
innerRadius = '40%';

// Donut with 60% hole (large center)
innerRadius = '60%';

// Donut with 80% hole (thin ring)
innerRadius = '80%';

Typical Configurations

When to Use Donut Charts

Use donut charts for:

• Additional center information: Display summary or key metric in the center
• Visual variation: Differentiate from pie charts in dashboard layouts
• Space efficiency: More visually compact than pie charts
• Focus and emphasis: Draw attention to the ring rather than the whole

---

Converting Between Types

Dynamic Type Switching

Allow users to switch between pie and donut:

import { Component } from '@angular/core';
import { CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective } from '@syncfusion/ej2-angular-charts';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-dynamic-chart',
  standalone: true,
  imports: [
    CommonModule,
    CircularChart3DComponent,
    CircularChartSeriesCollectionDirective,
    CircularChartSeriesDirective
  ],
  template: `
    <div>
      <div style="margin-bottom: 20px;">
        <button (click)="switchToPie()">Show as Pie</button>
        <button (click)="switchToDonut()">Show as Donut</button>
        <span style="margin-left: 20px;">Current: {{ isDonut ? 'Donut' : 'Pie' }}</span>
      </div>
      
      <ejs-circularchart3d id="chart">
        <e-circularchart3d-series-collection>
          <e-circularchart3d-series 
            [dataSource]="chartData" 
            xName="label" 
            yName="value" 
            type="Pie"
            [innerRadius]="isDonut ? '50%' : '0%'">
          </e-circularchart3d-series>
        </e-circularchart3d-series-collection>
      </ejs-circularchart3d>
    </div>
  `,
  styles: [`
    button {
      padding: 8px 16px;
      margin-right: 10px;
      cursor: pointer;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    button:hover {
      background-color: #f0f0f0;
    }
  `]
})
export class DynamicChartComponent {
  isDonut = false;
  
  chartData = [
    { label: 'Q1', value: 25 },
    { label: 'Q2', value: 28 },
    { label: 'Q3', value: 22 },
    { label: 'Q4', value: 25 }
  ];

  switchToPie() {
    this.isDonut = false;
  }

  switchToDonut() {
    this.isDonut = true;
  }
}

---

Radius Customization

Default Radius

By default, the radius is 80% of the minimum of chart width and height:

@Component({
  template: `
    <ejs-circularchart3d 
      [width]="'100%'" 
      [height]="'400px'">
      <!-- Pie will use 80% of min(width, height) -->
    </ejs-circularchart3d>
  `
})

Custom Fixed Radius

Set a specific radius value:

@Component({
  template: `
    <ejs-circularchart3d id="chart">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Pie"
          radius="200px">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})

Various Radius Per Slice

Assign different radii to each slice from data source:

@Component({
  template: `
    <ejs-circularchart3d id="chart">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="variousRadiusData" 
          xName="x" 
          yName="y" 
          type="Pie"
          [radius]="'radius'">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class VariousRadiusComponent {
  variousRadiusData = [
    { x: 'Product A', y: 30, radius: '100%' },
    { x: 'Product B', y: 25, radius: '90%' },
    { x: 'Product C', y: 20, radius: '80%' },
    { x: 'Product D', y: 25, radius: '70%' }
  ];
}

---

Series Configuration

Key Series Properties

@Component({
  template: `
    <ejs-circularchart3d [title]="'Sales Distribution'">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data"
          xName="category"              // Property for slice labels
          yName="sales"                 // Property for values
          name="Sales"                  // Series name for legend
          type="Pie"                    // 'Pie' or other types
          radius="80%"                  // Chart radius
          innerRadius="0%"              // 0% for pie, >0% for donut
          [cornerRadius]="0"            // Rounded corners (0 = sharp)
          [explode]="false"             // Separate slices on selection
          [emptyPointSettings]="{}"     // Handle missing data
          [pointColorMapping]="'color'"><!-- Use color from data -->
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})

---

Color Mapping

Map Colors from Data Source

Use pointColorMapping to assign colors from data:

import { Component } from '@angular/core';
import { CircularChart3DComponent, CircularChartSeriesCollectionDirective, CircularChartSeriesDirective } from '@syncfusion/ej2-angular-charts';
import { PieSeries3DService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-color-mapping',
  standalone: true,
  imports: [
    CircularChart3DComponent,
    CircularChartSeriesCollectionDirective,
    CircularChartSeriesDirective
  ],
  providers: [PieSeries3DService],
  template: `
    <ejs-circularchart3d id="chart">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="coloredData" 
          xName="department" 
          yName="budget" 
          type="Pie"
          pointColorMapping="color">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class ColorMappingComponent {
  coloredData = [
    { department: 'Engineering', budget: 45, color: '#5DADE2' },
    { department: 'Marketing', budget: 25, color: '#F39C12' },
    { department: 'Sales', budget: 20, color: '#48C9B0' },
    { department: 'Operations', budget: 10, color: '#E74C3C' }
  ];
}

Using Palettes

Apply predefined color palettes to all slices:

@Component({
  template: `
    <ejs-circularchart3d [palettes]="['#5DADE2', '#F39C12', '#48C9B0', '#E74C3C']">
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series 
          [dataSource]="data" 
          xName="x" 
          yName="y" 
          type="Pie">
        </e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  `
})
export class PaletteChartComponent {
  data = [
    { x: 'Item A', y: 30 },
    { x: 'Item B', y: 25 },
    { x: 'Item C', y: 20 },
    { x: 'Item D', y: 25 }
  ];
}

---

Troubleshooting

Pie not displaying as circle?

• Verify chart container has equal width and height
• Check that type="Pie" is set correctly

Donut appears as pie?

• Ensure innerRadius is set to value > 0%
• Verify property binding syntax is correct

Slices have wrong colors?

• Check pointColorMapping property name matches data property
• Verify color values in data are valid hex or named colors

---

Print, Export & Accessibility

Table of Contents

• Export Charts
• Export to PNG
• Export to SVG
• Export to PDF
• Export Options
• Batch Export
• Print Functionality
• Enable Print Button
• Print Multiple Elements
• Print Styling
• Accessibility Guidelines
• WCAG 2.1 Compliance
• Keyboard Navigation
• Enable Tab Navigation
• Keyboard Shortcuts
• ARIA Support
• Screen Reader Optimization
• Data Table Fallback
• Descriptive Titles and Labels
• Troubleshooting

---

Export Charts

Export to PNG

Export the chart as a PNG image:

import { Component, ViewChild } from '@angular/core';
import { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-export-png',
  standalone: true,
  imports: [CircularChart3DAllModule],
  template: `
    <div>
      <button (click)="exportChart()">Export as PNG</button>
      <ejs-circularchart3d id="chart" #chart>
        <e-circularchart3d-series-collection>
          <e-circularchart3d-series 
            [dataSource]="chartData" 
            xName="x" 
            yName="y" 
            type="Pie">
          </e-circularchart3d-series>
        </e-circularchart3d-series-collection>
      </ejs-circularchart3d>
    </div>
  `,
  styles: [`
    button {
      padding: 10px 20px;
      margin-bottom: 20px;
      background-color: #5DADE2;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #4A9FBE;
    }
  `]
})
export class ExportPNGComponent {
  @ViewChild('chart')
  chart!: CircularChart3DComponent;

  chartData = [
    { x: 'Product A', y: 35 },
    { x: 'Product B', y: 25 },
    { x: 'Product C', y: 40 }
  ];

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

Export to SVG

Export as scalable vector graphics:

export class ExportSVGComponent {
  @ViewChild('chart')
  chart!: CircularChart3DComponent;

  exportToSVG() {
    this.chart.export('SVG', 'sales-chart');
  }
}

Export to PDF

Export as PDF document:

export class ExportPDFComponent {
  @ViewChild('chart')
  chart!: CircularChart3DComponent;

  exportToPDF() {
    this.chart.export('PDF', 'sales-chart');
  }
}

Export Options

Configure export behavior:

@Component({
  template: `
    <div>
      <select (change)="selectedFormat = $event.target.value">
        <option value="PNG">PNG</option>
        <option value="SVG">SVG</option>
        <option value="PDF">PDF</option>
      </select>
      <input 
        type="text" 
        [(ngModel)]="fileName" 
        placeholder="Enter file name">
      <button (click)="exportChart()">Export</button>
    </div>
  `
})
export class ExportOptionsComponent {
  @ViewChild('chart')
  chart!: CircularChart3DComponent;

  selectedFormat = 'PNG';
  fileName = 'chart';

  exportChart() {
    // Export with specific filename
    this.chart.export(this.selectedFormat, this.fileName);
  }
}

Batch Export

Export multiple charts at once:

@Component({
  template: `
    <button (click)="exportAll()">Export All Charts</button>
    <div #charts></div>
  `
})
export class BatchExportComponent {
  @ViewChild('charts', { read: any })
  chartsContainer!: any;

  async exportAll() {
    const charts = this.chartsContainer.querySelectorAll('.chart-export');
    
    for (let i = 0; i < charts.length; i++) {
      // Get chart instance and export
      await new Promise(resolve => {
        setTimeout(() => {
          charts[i].ej2_instances[0].export('PNG', `chart-${i}`);
          resolve(null);
        }, 500);
      });
    }
  }
}

---

Print Functionality

Enable Print Button

Add print capability to charts:

import { Component, ViewChild } from '@angular/core';
import { CircularChart3DComponent } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-print-chart',
  standalone: true,
  imports: [CircularChart3DComponent],
  template: `
    <div>
      <button (click)="printChart()">Print Chart</button>
      <ejs-circularchart3d id="chart" #chart>
        <e-circularchart3d-series-collection>
          <e-circularchart3d-series 
            [dataSource]="chartData" 
            xName="category" 
            yName="value" 
            type="Pie">
          </e-circularchart3d-series>
        </e-circularchart3d-series-collection>
      </ejs-circularchart3d>
    </div>
  `
})
export class PrintChartComponent {
  @ViewChild('chart')
  chart!: CircularChart3DComponent;

  chartData = [
    { category: 'Q1', value: 25 },
    { category: 'Q2', value: 28 },
    { category: 'Q3', value: 22 },
    { category: 'Q4', value: 25 }
  ];

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

Print Multiple Elements

Print chart with additional content:

@Component({
  template: `
    <div id="printable-content">
      <h1>Quarterly Sales Report</h1>
      <p>Generated: {{ currentDate | date }}</p>
      
      <ejs-circularchart3d id="chart" #chart style="display: block; margin: 20px 0;">
        ...
      </ejs-circularchart3d>
      
      <table>
        <tr>
          <th>Quarter</th>
          <th>Sales</th>
        </tr>
        <tr *ngFor="let item of chartData">
          <td>{{ item.category }}</td>
          <td>{{ item.value }}</td>
        </tr>
      </table>
    </div>
    <button (click)="printContent()">Print Report</button>
  `
})
export class PrintReportComponent {
  currentDate = new Date();
  chartData = [
    { category: 'Q1', value: 25 },
    { category: 'Q2', value: 28 }
  ];

  printContent() {
    const printWindow = window.open('', '', 'height=600,width=800');
    const content = document.getElementById('printable-content')?.innerHTML;
    
    printWindow!.document.write(`
      <html>
        <head>
          <title>Sales Report</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          ${content}
        </body>
      </html>
    `);
    printWindow!.document.close();
    printWindow!.print();
  }
}

Print Styling

Optimize chart appearance for printing:

@media print {
  .no-print {
    display: none;
  }
  
  #chart {
    width: 100%;
    height: 500px;
    page-break-inside: avoid;
  }
  
  body {
    font-family: Arial, sans-serif;
    color: #000;
    background: #fff;
  }
}

---

Accessibility Guidelines

WCAG 2.1 Compliance

Ensure charts meet Web Content Accessibility Guidelines (WCAG 2.1):

Level A:

• Provide text alternatives for charts
• Ensure keyboard accessible
• Support color-blind users (don't rely on color alone)

Level AA:

• Maintain sufficient contrast ratio (4.5:1 for text)
• Support screen readers
• Provide descriptive labels

Level AAA:

• Enhanced contrast (7:1)
• Extended keyboard support
• Multiple ways to navigate

---

Keyboard Navigation

Enable Tab Navigation

Make chart interactive via keyboard:

@Component({
  template: `
    <div (keydown)="onKeyDown($event)">
      <ejs-circularchart3d 
        id="chart"
        tabindex="0"
        [selectionMode]="'Point'"
        (pointRender)="onPointRender($event)">
        ...
      </ejs-circularchart3d>
    </div>
  `
})
export class KeyboardNavigationComponent {
  selectedPointIndex = 0;
  data: any[] = [];

  onKeyDown(event: KeyboardEvent) {
    switch(event.key) {
      case 'ArrowRight':
      case 'ArrowDown':
        this.selectNextPoint();
        break;
      case 'ArrowLeft':
      case 'ArrowUp':
        this.selectPreviousPoint();
        break;
      case 'Enter':
        this.togglePointSelection();
        break;
    }
  }

  selectNextPoint() {
    this.selectedPointIndex = (this.selectedPointIndex + 1) % this.data.length;
  }

  selectPreviousPoint() {
    this.selectedPointIndex = (this.selectedPointIndex - 1 + this.data.length) % this.data.length;
  }

  togglePointSelection() {
    // Toggle selection state
  }

  onPointRender(args: any) {
    if (args.point.index === this.selectedPointIndex) {
      args.border = { width: 2, color: '#000' };
    }
  }
}

Keyboard Shortcuts

Define custom keyboard shortcuts:

@Component({
  template: `
    <div (keydown)="handleKeyboard($event)">
      <ejs-circularchart3d #chart>
        ...
      </ejs-circularchart3d>
    </div>
  `
})
export class KeyboardShortcutsComponent {
  @ViewChild('chart')
  chart!: CircularChart3DComponent;

  handleKeyboard(event: KeyboardEvent) {
    // Ctrl+S: Save/Export
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      this.chart.export('PNG', 'chart');
    }
    
    // Ctrl+P: Print
    if (event.ctrlKey && event.key === 'p') {
      event.preventDefault();
      this.chart.print();
    }
  }
}

---

ARIA Support

The chart component uses appropriate ARIA attributes:

Applied ARIA Roles:

• role="img" - Chart container
• role="button" - Interactive elements (legend items)
• role="region" - Chart areas
• role="status" - Live announcements

ARIA Attributes:

• aria-label - Descriptive labels
• aria-hidden - Hide decorative elements
• aria-pressed - Toggle state for legend items
• aria-describedby - Additional descriptions
• aria-live - Dynamic content announcements

---

Screen Reader Optimization

Data Table Fallback

Provide data in table format for screen readers:

@Component({
  template: `
    <div role="tablist">
      <!-- Chart visualization -->
      <div role="tab" aria-selected="true">
        <ejs-circularchart3d>
          ...
        </ejs-circularchart3d>
      </div>
      
      <!-- Text alternative -->
      <div role="tab" aria-selected="false">
        <table aria-label="Chart data">
          <thead>
            <tr>
              <th>Category</th>
              <th>Value</th>
              <th>Percentage</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of tableData">
              <td>{{ item.x }}</td>
              <td>{{ item.y }}</td>
              <td>{{ (item.y / totalValue * 100).toFixed(1) }}%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  `
})
export class ScreenReaderTableComponent {
  tableData = [
    { x: 'Product A', y: 35 },
    { x: 'Product B', y: 25 },
    { x: 'Product C', y: 40 }
  ];

  get totalValue() {
    return this.tableData.reduce((sum, item) => sum + item.y, 0);
  }
}

Descriptive Titles and Labels

Use descriptive text for clarity:

@Component({
  template: `
    <h2 id="chart-title">Sales Distribution by Region - Q4 2025</h2>
    <p id="chart-description">
      This chart shows sales performance across four regions:
      North (35%), South (28%), East (34%), West (32%)
    </p>
    
    <ejs-circularchart3d 
      title="Sales by Region"
      aria-labelledby="chart-title"
      aria-describedby="chart-description">
      ...
    </ejs-circularchart3d>
  `
})
export class DescriptiveLabelsComponent {}

---

Troubleshooting

Export not working?

• Verify ImageExport3DService is provided
• Check browser console for errors
• Ensure chart container is rendered

Print blank?

• Verify print CSS is applied
• Check that chart is fully rendered before printing
• Use page-break-inside: avoid in CSS

Screen reader not announcing?

• Check aria-labels are present and descriptive
• Use aria-live regions for dynamic updates
• Provide text alternatives in HTML

---