Implementing Syncfusion Angular Circular 3D Chart

When to Use This Skill

• 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

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

Getting Started

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

Pie vs Donut Configuration

• 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

• 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

• 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

• 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

• 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

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

@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

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

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

type

dataSource

xName

yName

innerRadius

radius

pointColorMapping

dataLabel

tooltip

legendSettings

title

subTitle

enableSmartLabels

emptyPointSettings

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