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](references/api-reference.md)

Getting Started

📄 Read: [references/getting-started.md](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](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](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](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](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](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.