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

Prop	Type	Purpose
`type`	string	Chart type: 'Pie' or 'Donut'
`dataSource`	any[]	Array of data objects for chart
`xName`	string	Data property for category/label
`yName`	string	Data property for values
`innerRadius`	string	Donut hole size (0-100%, Pie: 0%, Donut: 40-60%)
`radius`	string	Chart radius (default: 80% of min width/height)
`pointColorMapping`	string	Data property for point colors
`dataLabel`	DataLabelSettings	Label configuration (visible, position, template)
`tooltip`	TooltipSettings	Tooltip settings (enable, format, template, header)
`legendSettings`	LegendSettings	Legend position and behavior
`title`	string	Chart title text
`subTitle`	string	Chart subtitle text
`enableSmartLabels`	boolean	Auto-arrange labels to avoid overlap (default: true)
`emptyPointSettings`	EmptyPointSettings	Handle missing data points

Common Use Cases

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

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