Syncfusion React 3d Circular Chart

Implementing Syncfusion React 3D Circular Charts

A comprehensive skill for implementing Syncfusion's React 3D Circular Chart component. This skill guides you through creating pie and donut charts with 3D visualization, data labels, legends, tooltips, and advanced customization options.

When to Use This Skill

Use this skill when you need to:

• Create 3D pie or donut charts in React applications
• Visualize proportional data with circular charts
• Display data with 3D depth and visual appeal
• Add interactive tooltips and legends to charts
• Customize chart appearance with data labels
• Handle empty or null data points gracefully
• Export charts to various formats (PNG, JPEG, SVG, PDF)
• Print charts directly from the browser
• Implement responsive circular chart visualizations

Component Overview

The 3D Circular Chart component provides:

• Pie and Donut Charts: Classic circular visualizations with 3D depth
• Flexible Data Binding: Easy mapping of data sources to chart series
• Interactive Features: Tooltips, legends, and click events
• Visual Customization: Data labels, colors, and radius configurations
• Export Options: Print and export to multiple formats
• Empty Point Handling: Smart handling of null/undefined values
• Responsive Design: Adapts to container size automatically

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package dependencies
• Setting up React application with Vite or Create React App
• Adding 3D Circular Chart component to your project
• Importing CSS themes
• Basic pie series implementation with data source
• Mapping data fields with xName and yName properties
• Running your first 3D Circular Chart
• Minimal working example

Pie and Donut Charts

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

• Injecting PieSeries3D module
• Rendering default pie charts
• Customizing chart radius (default 80% of container)
• Creating various radius pie charts with per-slice customization
• Implementing donut charts using innerRadius property
• Text and fill color mapping from data source
• Customizing individual points with pointRender event
• Complete examples for pie and donut variations

Data Labels

📄 Read: references/data-labels.md

• Enabling data label visibility
• Injecting CircularChartDataLabel3D module
• Smart label arrangement to prevent overlap
• Positioning labels inside or outside the chart
• Creating custom templates with placeholders
• Formatting text and styling labels
• Configuring connector lines
• Font customization for data labels

Legend

📄 Read: references/legend.md

• Enabling legend visibility
• Injecting CircularChartLegend3D module
• Positioning legends (left, right, top, bottom)
• Alignment options (center, far, near)
• Reversing legend item order
• Legend pagination for many items
• Shape and marker customization
• Styling and click behavior configuration

Tooltip

📄 Read: references/tooltip.md

• Enabling tooltip on hover
• Injecting CircularChartTooltip3D module
• Setting custom tooltip headers
• Format string customization with placeholders
• Creating tooltip templates
• Displaying series names and point values
• Styling tooltip appearance
• Event-based tooltip customization

Empty Points

📄 Read: references/empty-points.md

• Understanding empty points (null/undefined values)
• Configuring emptyPointSettings property
• Mode options: Gap, Average, Drop, Zero
• Gap mode: skipping empty data points
• Average mode: using calculated averages
• Drop mode: excluding from chart
• Zero mode: treating as zero values
• Custom fill colors for empty points

Title and Subtitle

📄 Read: references/title-and-subtitle.md

• Adding chart titles with title property
• Title positioning and alignment
• Customizing title style (font, color, size)
• Adding subtitles with subTitle property
• Subtitle positioning
• Styling subtitles independently
• Combining title and subtitle
• Responsive title sizing

Print and Export

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

• Printing charts directly from browser
• Using print method with chart ID
• Exporting to image formats (JPEG, PNG, SVG)
• Exporting to PDF with pdfExport method
• Specifying export type and filename
• Button-triggered print and export
• Export quality and resolution settings
• Troubleshooting export issues

API Reference

📄 Read: references/api-reference.md

• Summary of component properties, methods, and events based on the official Syncfusion API docs for CircularChart3DComponent.

Quick Start Example

import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D, Inject } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    const circularData = [
        { x: 'Chrome', y: 62.92 },
        { x: 'Internet Explorer', y: 6.12 },
        { x: 'Opera', y: 3.15 },
        { x: 'Edge', y: 5.5 },
        { x: 'Safari', y: 19.97 },
        { x: 'Others', y: 2.34 }
    ];
    return <CircularChart3DComponent id='charts' title='Browser Market Shares in November 2023' tilt={-45} legendSettings={{ visible: true, position: 'Right' }}>
        <Inject services={[PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D]} />
        <CircularChart3DSeriesCollectionDirective>
            <CircularChart3DSeriesDirective dataSource={circularData} xName='x' yName='y' dataLabel={{ visible: true, position: 'Outside', name: 'x', font: { fontWeight: '600' }, connectorStyle: { length: '40px' } }}>
            </CircularChart3DSeriesDirective>
        </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>;
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);

Common Patterns

Creating a Donut Chart

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="value"
  innerRadius="40%"  // Creates donut effect
  radius="80%"
/>

Adding Data Labels

import { CircularChartDataLabel3D } from '@syncfusion/ej2-react-charts';

<CircularChart3DComponent>
  <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
  <CircularChart3DSeries>
    <CircularChart3DSeriesDirective
      dataSource={data}
      xName="x"
      yName="y"
      dataLabel={{ visible: true, position: 'Outside' }}
    />
  </CircularChart3DSeries>
</CircularChart3DComponent>

Enabling Legend and Tooltip

import { CircularChartLegend3D, CircularChartTooltip3D } from '@syncfusion/ej2-react-charts';

<CircularChart3DComponent
  legendSettings={{ visible: true, position: 'Bottom' }}
  tooltip={{ enable: true, format: '${point.x}: ${point.y}' }}
>
  <Inject services={[PieSeries3D, CircularChartLegend3D, CircularChartTooltip3D]} />
  {/* Series configuration */}
</CircularChart3DComponent>

Handling Empty Points

<CircularChart3DSeriesDirective
  dataSource={dataWithNulls}
  xName="category"
  yName="value"
  emptyPointSettings={{ 
    mode: 'Average',  // Options: Gap, Average, Drop, Zero
    fill: '#cccccc'
  }}
/>

Key Props Reference

CircularChart3DComponent Props

• title: Chart title text
• subTitle: Chart subtitle text
• legendSettings: Configure legend appearance and behavior
• tooltip: Enable and customize tooltips
• enableExport: Enable export functionality
• width/height: Chart dimensions

CircularChart3DSeriesDirective Props

• dataSource: Array of data objects
• xName: Property name for category/label
• yName: Property name for values
• radius: Chart radius (percentage string, e.g., "70%")
• innerRadius: Inner radius for donut charts (percentage)
• dataLabel: Configuration for data labels
• emptyPointSettings: Handling null/undefined values
• pointColorMapping: Map colors from data source

Module Injection

Required modules must be injected via <Inject services={[...]} />:

• PieSeries3D: Core pie/donut chart functionality
• CircularChartDataLabel3D: Data label features
• CircularChartLegend3D: Legend functionality
• CircularChartTooltip3D: Tooltip features
• CircularChart3DExport: Export to image formats
• CircularChart3DPdfExport: PDF export capability

Common Use Cases

Sales Distribution Dashboard

Perfect for displaying market share, sales by category, or revenue distribution across products/regions.

Budget Allocation

Visualize budget breakdown by department, expense categories, or cost centers with clear proportional representation.

Survey Results

Show poll results, customer feedback distribution, or demographic breakdowns with intuitive circular visualization.

Portfolio Composition

Display investment allocation, asset distribution, or resource allocation with interactive charts.

Time Allocation

Represent time spent on activities, project phases, or resource utilization with donut charts.

Troubleshooting Tips

Chart not rendering?

• Ensure you've installed @syncfusion/ej2-react-charts package
• Import required CSS theme file
• Verify data source is properly formatted array
• Check that required modules are injected (PieSeries3D)

Data labels overlapping?

• The component automatically arranges labels to prevent overlap
• Use position: 'Outside' for better spacing
• Consider reducing font size or using templates

Export not working?

• Inject CircularChart3DExport or CircularChart3DPdfExport modules
• Set enableExport: true on the chart component
• Ensure you're calling the correct method (export or pdfExport)

Colors not displaying correctly?

• Use pointColorMapping to map colors from data source
• Specify colors in data objects or use chart palettes
• Check CSS theme is properly imported

---

Ready to build? Start with references/getting-started.md for installation and basic setup, then explore specific features as needed.

CircularChart3DComponent API Reference

This file summarizes the public API (properties, methods, and events) for the CircularChart3DComponent based on the official Syncfusion documentation: https://ej2.syncfusion.com/react/documentation/api/circularchart3d/index-default

Properties

• background: string — Chart background color (CSS color). Default: null
• backgroundImage: string — Background image URL. Default: null
• border: BorderModel — Border customization (color, width). See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/bordermodel
• circularChartDataLabel3DModule: CircularChartDataLabel3D — Data label module.
• circularChartExport3DModule: CircularChartExport3D — Export module. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchartexport3d
• circularChartHighlight3DModule: CircularChartHighlight3D — Highlight module.
• circularChartLegend3DModule: CircularChartLegend3D — Legend module.
• circularChartSelection3DModule: CircularChartSelection3D — Selection module. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchartselection3d
• circularChartTooltip3DModule: CircularChartTooltip3D — Tooltip module. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularcharttooltip3d
• dataSource: Object | DataManager — Data source for the chart. Default: ''
• depth: number — Depth of the circular 3D chart. Default: 50
• enableAnimation: boolean — Enable animations. Default: true
• enableExport: boolean — Enable export. Default: false
• enablePersistence: boolean — Persist state between reloads. Default: false
• enableRotation: boolean — Enable rotation. Default: false
• enableRtl: boolean — Right-to-left rendering. Default: false
• height: string — Height (e.g., 100px or 100%). Default: null
• highlightColor: string — Color used for highlight. Default: ''
• highlightMode: CircularChart3DHighlightMode — None | Point. Default: None. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dhighlightmode
• highlightPattern: SelectionPattern — Highlight pattern (see docs). Default: None. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/selectionpattern
• isMultiSelect: boolean — Enable multi-selection (requires selectionMode = Point). Default: false
• legendSettings: CircularChart3DLegendSettingsModel — Legend options. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dlegendsettingsmodel
• locale: string — Locale override. Default: ''
• margin: MarginModel — Chart margins. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/marginmodel
• rotation: number — Rotation angle. Default: 0
• selectedDataIndexes: IndexesModel[] — Point indexes to select on load. Default: []. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/indexesmodel
• selectionMode: CircularChart3DSelectionMode — None | Point. Default: None. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dselectionmode
• selectionPattern: SelectionPattern — Selection pattern (see docs). Default: None. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/selectionpattern
• series: CircularChart3DSeriesModel[] — Series configuration array. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dseriesmodel
• subTitle: string — Chart subtitle. Default: null
• subTitleStyle: FontModel — Subtitle style options. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/fontmodel
• theme: CircularChart3DTheme — Theme. Default: Material. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dtheme
• tilt: number — Slope angle. Default: 0
• title: string — Chart title. Default: null
• titleStyle: FontModel — Title style options. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/fontmodel
• tooltip: CircularChart3DTooltipSettingsModel — Tooltip options. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dtooltipsettingsmodel
• useGroupingSeparator: boolean — Use grouping separators for numbers. Default: false
• width: string — Width (e.g., 100px or 100%). Default: null

Methods

• export(type: ExportType, fileName: string): void — Export the chart to image formats (PNG, JPEG, SVG). See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/index-default#methods
• pdfExport(fileName?: string, orientation?: PdfPageOrientation, controls?: CircularChart3D[], width?: number, height?: number, isVertical?: boolean, header?: IPDFArgs, footer?: IPDFArgs, exportToMultiplePage?: boolean): void — Export chart(s) to PDF. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/index-default#methods
• print(id?: string[] | string | Element): void — Print the chart or element. See https://ej2.syncfusion.com/react/documentation/api/circularchart3d/index-default#methods

Events

• afterExport — Fires after export completes. ([CircularChart3DAfterExportEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dafterexporteventargs)
• beforeExport — Fires before export starts. ([CircularChart3DExportEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dexporteventargs)
• beforePrint — Fires before print. ([CircularChart3DPrintEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dprinteventargs)
• beforeResize — Fires before resizing. ([CircularChart3DBeforeResizeEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dbeforeresizeeventargs)
• circularChart3DMouseClick — Fires on chart mouse click. ([CircularChart3DMouseEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dmouseeventargs)
• circularChart3DMouseDown — Fires on mouse down. ([CircularChart3DMouseEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dmouseeventargs)
• circularChart3DMouseLeave — Fires on mouse leave. ([CircularChart3DMouseEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dmouseeventargs)
• circularChart3DMouseMove — Fires on mouse move/hover. ([CircularChart3DMouseEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dmouseeventargs)
• circularChart3DMouseUp — Fires on mouse up. ([CircularChart3DMouseEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dmouseeventargs)
• legendClick — Fires when legend is clicked. ([CircularChart3DLegendClickEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dlegendclickeventargs)
• legendRender — Fires before legend render. ([CircularChart3DLegendRenderEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dlegendrendereventargs)
• load — Fires before control is loaded. ([CircularChart3DLoadedEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dloadedeventargs)
• loaded — Fires after control is loaded. ([CircularChart3DLoadedEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dloadedeventargs)
• pointClick — Fires when a point is clicked. ([CircularChart3DPointEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dpointeventargs)
• pointMove — Fires when hovering a point. ([CircularChart3DPointEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dpointeventargs)
• pointRender — Fires before a point is rendered. ([CircularChart3DPointRenderEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dpointrendereventargs)
• resized — Fires after chart resize. ([CircularChart3DResizeEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dresizeeventargs)
• selectionComplete — Fires after selection completes. ([CircularChart3DSelectionCompleteEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dselectioncompleteeventargs)
• seriesRender — Fires before a series is rendered. ([CircularChart3DSeriesRenderEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dseriesrendereventargs)
• textRender — Fires before data label text render. ([CircularChart3DTextRenderEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dtextrendereventargs)
• tooltipRender — Fires when tooltip is ready. ([CircularChart3DTooltipRenderEventArgs] https://ej2.syncfusion.com/react/documentation/api/circularchart3d/circularchart3dtooltiprendereventargs)

Notes

• This summary follows the official Syncfusion API page for CircularChart3DComponent. For detailed types and link targets (models and event args), refer to the official docs: https://ej2.syncfusion.com/react/documentation/api/circularchart3d/index-default

Data Labels

This guide covers adding and customizing data labels in 3D Circular Charts, including positioning, templates, connector lines, text formatting, and dynamic customization.

Table of Contents

• Overview
• Enabling Data Labels
• Positioning
• Data Label Templates
• Connector Lines
• Text Mapping
• Format Options
• Dynamic Customization
• Percentage Display

Overview

Data labels display values, percentages, or custom text directly on chart slices, making it easier for users to read exact values without hovering. The 3D Circular Chart automatically arranges labels to prevent overlapping.

Enabling Data Labels

Module Injection

First, inject the CircularChartDataLabel3D module:

import {
  CircularChart3DComponent,
  CircularChart3DSeriesCollectionDirective,
  CircularChart3DSeriesDirective,
  PieSeries3D,
  CircularChartDataLabel3D,  // Import module
  Inject
} from '@syncfusion/ej2-react-charts';

Basic Data Label Setup

Enable data labels by setting visible: true in the dataLabel property:

function DataLabelExample() {
  const data = [
    { category: 'Chrome', usage: 65 },
    { category: 'Firefox', usage: 15 },
    { category: 'Safari', usage: 12 },
    { category: 'Edge', usage: 8 }
  ];

  return (
    <CircularChart3DComponent
      id="chart"
      title="Browser Usage"
    >
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="usage"
          dataLabel={{ visible: true }}  // Enable data labels
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Result: Labels displaying category names appear on each slice with smart positioning to avoid overlap.

Smart Label Arrangement

The component automatically:

• Prevents label overlapping
• Adjusts label positions for readability
• Uses connector lines when labels are outside
• Optimizes placement based on slice size

Positioning

Data labels can be positioned either inside or outside the chart slices.

Inside Position

Labels appear within the chart slices (default for larger slices):

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="value"
  dataLabel={{
    visible: true,
    position: 'Inside'
  }}
/>

Best for: Large slices with enough space for text.

Outside Position

Labels appear outside the chart with connector lines:

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="value"
  dataLabel={{
    visible: true,
    position: 'Outside'
  }}
/>

Best for: Small slices or when you want to avoid cluttering the chart.

Position Comparison

function PositionComparison() {
  const data = [
    { item: 'A', value: 40 },
    { item: 'B', value: 30 },
    { item: 'C', value: 20 },
    { item: 'D', value: 10 }
  ];

  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <CircularChart3DComponent title="Inside Labels">
        <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="item"
            yName="value"
            dataLabel={{ visible: true, position: 'Inside' }}
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>

      <CircularChart3DComponent title="Outside Labels">
        <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="item"
            yName="value"
            dataLabel={{ visible: true, position: 'Outside' }}
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    </div>
  );
}

Data Label Templates

Templates allow you to create custom label layouts with HTML and dynamic placeholders.

Template Placeholders

• ${point.x}: Category/label value
• ${point.y}: Data value
• ${point.percentage}: Percentage (if calculated)
• ${series.name}: Series name

Basic Template

function TemplateExample() {
  const data = [
    { product: 'Laptops', sales: 35 },
    { product: 'Phones', sales: 28 },
    { product: 'Tablets', sales: 20 },
    { product: 'Accessories', sales: 17 }
  ];

  const labelTemplate = '<div style="background: #fff; padding: 5px; border-radius: 3px;">' +
                        '<b>${point.x}</b><br/>' +
                        'Sales: ${point.y}' +
                        '</div>';

  return (
    <CircularChart3DComponent title="Product Sales">
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="product"
          yName="sales"
          dataLabel={{
            visible: true,
            position: 'Outside',
            template: labelTemplate
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Styled Template with Icons

const richTemplate = '<div style="' +
                    'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);' +
                    'color: white;' +
                    'padding: 8px 12px;' +
                    'border-radius: 5px;' +
                    'box-shadow: 0 2px 4px rgba(0,0,0,0.2);' +
                    'font-family: Arial;' +
                    '">' +
                    '<div style="font-size: 12px; opacity: 0.9;">${point.x}</div>' +
                    '<div style="font-size: 16px; font-weight: bold;">${point.y}</div>' +
                    '</div>';

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="value"
  dataLabel={{
    visible: true,
    position: 'Outside',
    template: richTemplate
  }}
/>

React Function Template

For more complex templates, use a function:

function FunctionTemplateExample() {
  const data = [
    { region: 'North', revenue: 45000 },
    { region: 'South', revenue: 38000 },
    { region: 'East', revenue: 52000 },
    { region: 'West', revenue: 41000 }
  ];

  const template = (props) => {
    const color = props.point.y > 45000 ? '#4CAF50' : '#2196F3';
    return (
      <div style={{ 
        background: color, 
        color: 'white', 
        padding: '6px 10px',
        borderRadius: '4px',
        fontSize: '11px'
      }}>
        <div style={{ fontWeight: 'bold' }}>{props.point.x}</div>
        <div>${(props.point.y / 1000).toFixed(0)}K</div>
      </div>
    );
  };

  return (
    <CircularChart3DComponent title="Regional Revenue">
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="region"
          yName="revenue"
          dataLabel={{
            visible: true,
            position: 'Outside',
            template: template
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Connector Lines

Connector lines connect labels to their slices when positioned outside. Customize them using connectorStyle.

Basic Connector Customization

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="value"
  dataLabel={{
    visible: true,
    position: 'Outside',
    connectorStyle: {
      color: '#333333',
      width: 2,
      length: '30px',
      dashArray: '5,3'  // Dashed line
    }
  }}
/>

Connector Properties

• `color`: Line color (hex, rgb, or color name)
• `width`: Line thickness in pixels
• `length`: Distance from chart to label
• `dashArray`: Dash pattern (e.g., '5,3' for dashes)

Styled Connectors Example

function StyledConnectors() {
  const data = [
    { category: 'Product A', sales: 45 },
    { category: 'Product B', sales: 30 },
    { category: 'Product C', sales: 25 }
  ];

  return (
    <CircularChart3DComponent title="Sales Distribution">
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="sales"
          dataLabel={{
            visible: true,
            position: 'Outside',
            connectorStyle: {
              color: '#2196F3',
              width: 2,
              length: '50px'  // Longer connector for spacing
            },
            font: { size: '12px', fontWeight: 'bold', color: '#333' }
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Text Mapping

Map custom text from your data source to display as labels instead of default values.

Using Name Property

function TextMappingExample() {
  const data = [
    { id: 1, name: 'Premium Users', count: 150, displayText: '150 Premium' },
    { id: 2, name: 'Standard Users', count: 300, displayText: '300 Standard' },
    { id: 3, name: 'Free Users', count: 550, displayText: '550 Free' }
  ];

  return (
    <CircularChart3DComponent title="User Distribution">
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="name"      // Show name in label
          yName="count"
          dataLabel={{
            visible: true,
            name: 'displayText'  // Use custom text from data
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Format Options

Format numeric labels using standard format strings.

Common Format Patterns

Using Format Property

function FormattedLabels() {
  const data = [
    { department: 'Engineering', budget: 125000 },
    { department: 'Marketing', budget: 85000 },
    { department: 'Sales', budget: 110000 },
    { department: 'Operations', budget: 75000 }
  ];

  return (
    <CircularChart3DComponent title="Department Budgets">
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="department"
          yName="budget"
          dataLabel={{
            visible: true,
            position: 'Outside',
            format: 'c0'  // Currency with no decimals: $125,000
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Percentage Format

const fractionalData = [
  { category: 'A', value: 0.35 },  // 35%
  { category: 'B', value: 0.28 },  // 28%
  { category: 'C', value: 0.37 }   // 37%
];

<CircularChart3DSeriesDirective
  dataSource={fractionalData}
  xName="category"
  yName="value"
  dataLabel={{
    visible: true,
    format: 'p0'  // Shows as 35%, 28%, 37%
  }}
/>

Dynamic Customization

Use the textRender event to customize label text dynamically before rendering.

Basic textRender Usage

function DynamicLabels() {
  const data = [
    { item: 'Item A', value: 45 },
    { item: 'Item B', value: 30 },
    { item: 'Item C', value: 25 }
  ];

  const handleTextRender = (args) => {
    // Modify label text
    args.text = `${args.point.x}: ${args.point.y} units`;
  };

  return (
    <CircularChart3DComponent
      title="Inventory"
      textRender={handleTextRender}
    >
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="item"
          yName="value"
          dataLabel={{ visible: true }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Conditional Styling

function ConditionalLabels() {
  const data = [
    { product: 'Product A', sales: 85 },
    { product: 'Product B', sales: 45 },  // Low
    { product: 'Product C', sales: 92 },
    { product: 'Product D', sales: 38 }   // Low
  ];

  const handleTextRender = (args) => {
    if (args.point.y < 50) {
      args.color = '#F44336';  // Red for low sales
      args.text = `⚠️ ${args.text}`;  // Add warning icon
    } else if (args.point.y > 90) {
      args.color = '#4CAF50';  // Green for high sales
      args.text = `✓ ${args.text}`;  // Add checkmark
    }
  };

  return (
    <CircularChart3DComponent
      title="Sales Performance"
      textRender={handleTextRender}
    >
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="product"
          yName="sales"
          dataLabel={{ visible: true, position: 'Outside' }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Percentage Display

Display percentages calculated from the total of all values.

Using textRender for Percentages

function PercentageLabels() {
  const data = [
    { category: 'A', value: 35 },
    { category: 'B', value: 28 },
    { category: 'C', value: 20 },
    { category: 'D', value: 17 }
  ];

  const handleTextRender = (args) => {
    const total = data.reduce((sum, item) => sum + item.value, 0);
    const percentage = ((args.point.y / total) * 100).toFixed(1);
    args.text = `${args.point.x}\n${percentage}%`;
  };

  return (
    <CircularChart3DComponent
      title="Market Share"
      textRender={handleTextRender}
    >
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="value"
          dataLabel={{
            visible: true,
            position: 'Outside',
            font: { size: '11px', fontWeight: '600' }
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Using Template for Percentages

function PercentageTemplate() {
  const data = [
    { type: 'Type A', count: 40 },
    { type: 'Type B', count: 30 },
    { type: 'Type C', count: 30 }
  ];

  const total = data.reduce((sum, item) => sum + item.count, 0);

  const percentTemplate = (props) => {
    const percent = ((props.point.y / total) * 100).toFixed(1);
    return (
      <div style={{ textAlign: 'center', fontSize: '11px' }}>
        <div style={{ fontWeight: 'bold' }}>{props.point.x}</div>
        <div style={{ color: '#666' }}>{percent}%</div>
        <div style={{ fontSize: '10px', color: '#999' }}>({props.point.y})</div>
      </div>
    );
  };

  return (
    <CircularChart3DComponent title="Distribution">
      <Inject services={[PieSeries3D, CircularChartDataLabel3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="type"
          yName="count"
          dataLabel={{
            visible: true,
            position: 'Outside',
            template: percentTemplate
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Summary

You've learned how to:

• ✅ Enable data labels with CircularChartDataLabel3D module
• ✅ Position labels inside or outside chart slices
• ✅ Create custom templates with HTML and placeholders
• ✅ Customize connector lines (color, width, length, dash)
• ✅ Map custom text from data source
• ✅ Format numbers with n, p, c patterns
• ✅ Dynamically customize labels with textRender event
• ✅ Display calculated percentages

Best Practices:

• Use Outside position for small slices
• Keep templates simple for better performance
• Use format strings for standard numeric displays
• Apply textRender for complex calculations
• Style connector lines to match your theme

Empty Points

This guide covers handling empty, null, or undefined data points in 3D Circular Charts, including different empty point modes and custom styling.

Table of contents

• Overview
• Understanding Empty Points
• What Are Empty Points?
• Empty Point Modes
• Gap Mode
• Average Mode
• Drop Mode
• Zero Mode
• Mode Comparison
• Custom Fill Color for Empty Points
• Practical Examples
• Mode Selection Guide
• Complete Configuration Example
• Summary

Overview

Empty points are data values that are null, undefined, or missing in your dataset. The 3D Circular Chart provides several strategies to handle these gaps in your data gracefully.

Understanding Empty Points

What Are Empty Points?

Empty points occur when:

• A data value is null
• A data value is undefined
• A data value is missing from the data object

const dataWithEmptyPoints = [
  { category: 'A', value: 30 },      // Valid
  { category: 'B', value: null },    // Empty point
  { category: 'C', value: undefined },// Empty point
  { category: 'D', value: 25 },      // Valid
  { category: 'E' },                 // Empty point (no value property)
];

Default Behavior

By default, empty points use Gap mode - they are ignored and not plotted.

Empty Point Modes

Configure how empty points are handled using emptyPointSettings.mode:

Available Modes

• `Gap` (default): Skip empty points, leaving gaps
• `Average`: Use average of neighboring values
• `Drop`: Remove empty points completely
• `Zero`: Treat empty points as zero value

Gap Mode

The default mode. Empty points are ignored and not rendered.

function GapModeExample() {
  const data = [
    { product: 'Product A', sales: 35 },
    { product: 'Product B', sales: null },    // Will be skipped
    { product: 'Product C', sales: 25 },
    { product: 'Product D', sales: undefined }, // Will be skipped
    { product: 'Product E', sales: 15 }
  ];

  return (
    <CircularChart3DComponent
      id="chart"
      title="Sales Data (Gap Mode)"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="product"
          yName="sales"
          emptyPointSettings={{
            mode: 'Gap'  // Default behavior
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Result: Chart shows only Products A, C, and E. Products B and D are not displayed.

Use when: You want to show that data is missing without substituting values.

Average Mode

Empty points are filled with the average of their neighboring points.

function AverageModeExample() {
  const data = [
    { month: 'Jan', revenue: 30 },
    { month: 'Feb', revenue: null },     // Will use average of Jan (30) and Mar (50) = 40
    { month: 'Mar', revenue: 50 },
    { month: 'Apr', revenue: undefined }, // Will use average of Mar (50) and May (40) = 45
    { month: 'May', revenue: 40 }
  ];

  return (
    <CircularChart3DComponent
      title="Monthly Revenue (Average Mode)"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="month"
          yName="revenue"
          emptyPointSettings={{
            mode: 'Average'
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Calculation:

• Feb: (30 + 50) / 2 = 40
• Apr: (50 + 40) / 2 = 45

Use when: Missing data should be interpolated from surrounding values.

Drop Mode

Empty points are completely removed from the dataset.

function DropModeExample() {
  const data = [
    { category: 'Category A', value: 35 },
    { category: 'Category B', value: null },    // Completely removed
    { category: 'Category C', value: 28 },
    { category: 'Category D', value: undefined }, // Completely removed
    { category: 'Category E', value: 22 }
  ];

  return (
    <CircularChart3DComponent
      title="Data Distribution (Drop Mode)"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="value"
          emptyPointSettings={{
            mode: 'Drop'
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Result: Only A, C, and E appear. B and D are removed entirely from the chart and legend.

Use when: Missing data points are irrelevant and should be hidden completely.

Zero Mode

Empty points are treated as having a value of zero.

function ZeroModeExample() {
  const data = [
    { quarter: 'Q1', profit: 45 },
    { quarter: 'Q2', profit: null },      // Treated as 0
    { quarter: 'Q3', profit: 38 },
    { quarter: 'Q4', profit: undefined }  // Treated as 0
  ];

  return (
    <CircularChart3DComponent
      title="Quarterly Profits (Zero Mode)"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="quarter"
          yName="profit"
          emptyPointSettings={{
            mode: 'Zero'
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Result: Q2 and Q4 appear as slices with value 0 (very small or invisible depending on other values).

Use when: Missing data should be interpreted as "no value" or "none".

Mode Comparison

function ModeComparison() {
  const data = [
    { item: 'A', value: 30 },
    { item: 'B', value: null },
    { item: 'C', value: 40 },
    { item: 'D', value: undefined },
    { item: 'E', value: 20 }
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
      <CircularChart3DComponent title="Gap Mode">
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="item"
            yName="value"
            emptyPointSettings={{ mode: 'Gap' }}
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>

      <CircularChart3DComponent title="Average Mode">
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="item"
            yName="value"
            emptyPointSettings={{ mode: 'Average' }}
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>

      <CircularChart3DComponent title="Drop Mode">
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="item"
            yName="value"
            emptyPointSettings={{ mode: 'Drop' }}
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>

      <CircularChart3DComponent title="Zero Mode">
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="item"
            yName="value"
            emptyPointSettings={{ mode: 'Zero' }}
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    </div>
  );
}

Custom Fill Color for Empty Points

Style empty points with a custom color to make them visually distinct.

Setting Custom Fill

function CustomColorEmpty() {
  const data = [
    { category: 'A', value: 35 },
    { category: 'B', value: null },    // Will be gray
    { category: 'C', value: 28 },
    { category: 'D', value: undefined }, // Will be gray
    { category: 'E', value: 22 }
  ];

  return (
    <CircularChart3DComponent
      title="Sales Distribution"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="value"
          emptyPointSettings={{
            mode: 'Zero',
            fill: '#CCCCCC'  // Gray color for empty points
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Note: Fill color only applies when empty points are rendered (Zero or Average modes).

Color with Average Mode

function AverageWithColor() {
  const data = [
    { month: 'Jan', sales: 30 },
    { month: 'Feb', sales: null },
    { month: 'Mar', sales: 50 },
    { month: 'Apr', sales: undefined },
    { month: 'May', sales: 40 }
  ];

  return (
    <CircularChart3DComponent
      title="Monthly Sales (Estimated)"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="month"
          yName="sales"
          emptyPointSettings={{
            mode: 'Average',
            fill: '#FFE082'  // Light orange for estimated values
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Use case: Distinguish interpolated/estimated values from actual data.

Practical Examples

Handling API Data with Gaps

function APIDataWithGaps() {
  const [chartData, setChartData] = React.useState([]);

  React.useEffect(() => {
    // Simulate API call that returns incomplete data
    const apiData = [
      { region: 'North', revenue: 45000 },
      { region: 'South', revenue: null },      // Missing
      { region: 'East', revenue: 52000 },
      { region: 'West', revenue: undefined },  // Missing
      { region: 'Central', revenue: 38000 }
    ];
    setChartData(apiData);
  }, []);

  return (
    <CircularChart3DComponent
      title="Regional Revenue"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={chartData}
          xName="region"
          yName="revenue"
          emptyPointSettings={{
            mode: 'Average',
            fill: '#B0BEC5'  // Gray for estimated regions
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Survey Data with Non-Responses

function SurveyData() {
  const surveyResults = [
    { option: 'Very Satisfied', count: 45 },
    { option: 'Satisfied', count: 32 },
    { option: 'Neutral', count: null },      // No responses
    { option: 'Dissatisfied', count: 8 },
    { option: 'Very Dissatisfied', count: 5 }
  ];

  return (
    <CircularChart3DComponent
      title="Customer Satisfaction Survey"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={surveyResults}
          xName="option"
          yName="count"
          emptyPointSettings={{
            mode: 'Zero',
            fill: '#E0E0E0'  // Show as "no data"
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Time Series with Missing Periods

function TimeSeriesMissing() {
  const monthlyData = [
    { month: 'Jan', orders: 120 },
    { month: 'Feb', orders: 135 },
    { month: 'Mar', orders: null },       // System downtime
    { month: 'Apr', orders: undefined },  // System downtime
    { month: 'May', orders: 165 }
  ];

  return (
    <CircularChart3DComponent
      title="Monthly Orders"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={monthlyData}
          xName="month"
          yName="orders"
          emptyPointSettings={{
            mode: 'Gap'  // Show missing data explicitly
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Mode Selection Guide

When to Use Each Mode

Gap Mode:

• ✅ Data is genuinely missing and shouldn't be estimated
• ✅ You want to highlight data gaps visually
• ✅ Interpolation would be misleading

Average Mode:

• ✅ Missing values should be estimated
• ✅ Data follows a trend
• ✅ Gaps are temporary/accidental

Drop Mode:

• ✅ Missing data points are irrelevant
• ✅ You want a clean chart without gaps
• ✅ Empty points don't need to be acknowledged

Zero Mode:

• ✅ Missing data means "no activity"
• ✅ Zero is a meaningful value
• ✅ You want to show all categories

Complete Configuration Example

function CompleteEmptyPointHandling() {
  const productData = [
    { product: 'Laptops', q1: 45, q2: 52, q3: null, q4: 48 },
    { product: 'Phones', q1: 38, q2: null, q3: 42, q4: 45 },
    { product: 'Tablets', q1: 28, q2: 30, q3: 32, q4: undefined }
  ];

  // Use Q1 data for example
  const chartData = productData.map(p => ({
    product: p.product,
    sales: p.q1
  }));

  return (
    <CircularChart3DComponent
      title="Product Sales - Q1"
      width="600px"
      height="450px"
      legendSettings={{ visible: true }}
      tooltip={{ enable: true, format: '${point.x}: ${point.y} units' }}
    >
      <Inject services={[
        PieSeries3D,
        CircularChartLegend3D,
        CircularChartTooltip3D
      ]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={chartData}
          xName="product"
          yName="sales"
          emptyPointSettings={{
            mode: 'Average',
            fill: '#FFB74D'  // Orange for estimated data
          }}
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Summary

You've learned how to:

• ✅ Understand what empty points are (null, undefined, missing)
• ✅ Use Gap mode to skip empty points
• ✅ Use Average mode to interpolate missing values
• ✅ Use Drop mode to remove empty points entirely
• ✅ Use Zero mode to treat empty points as zero
• ✅ Apply custom colors to empty points
• ✅ Choose appropriate modes for different scenarios

Best Practices:

• Gap: Use when data gaps are significant
• Average: Use for smooth trend lines
• Drop: Use for clean, simplified charts
• Zero: Use when absence means zero
• Always document which mode you're using
• Style empty points differently to show they're estimated

Getting Started with React 3D Circular Chart

This guide walks you through installing, configuring, and creating your first Syncfusion React 3D Circular Chart component from scratch.

Table of contents

• Overview
• Dependencies
• Installation and Configuration
• Step 1: Create a React Application
• Step 2: Install Syncfusion 3D Circular Chart Package
• Step 3: Import CSS Themes
• Add 3D Circular Chart to Your Project
• Minimal Example
• Creating Your First Pie Chart with Data
• Customizing the Basic Chart
• Common Patterns
• Troubleshooting
• Next Steps
• Summary

Overview

The 3D Circular Chart component allows you to create visually appealing pie and donut charts with 3D depth. This guide covers everything from installation to rendering your first chart with data.

Dependencies

The 3D Circular Chart component requires the following packages:

|-- @syncfusion/ej2-react-charts
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

Good news: Once you install @syncfusion/ej2-react-charts, all other required dependencies are installed automatically.

Installation and Configuration

Step 1: Create a React Application

Syncfusion recommends using Vite for faster development and optimized builds.

Option A: Using Vite (Recommended)

For TypeScript:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

For JavaScript:

npm create vite@latest my-app -- --template react
cd my-app
npm install

Interactive Setup: If you prefer an interactive setup, simply run:

npm create vite@latest my-app

This will prompt you to select: 1. Framework: Choose React 2. Variant: Choose TypeScript or JavaScript

Then navigate to the project and install dependencies:

cd my-app
npm install

Option B: Using Create React App

If you prefer Create React App, you can still use it:

npx create-react-app my-app
cd my-app

Step 2: Install Syncfusion 3D Circular Chart Package

Install the Syncfusion React Charts package from npm:

npm install @syncfusion/ej2-react-charts --save

The --save flag adds the package to the dependencies section of your package.json file.

Add 3D Circular Chart to Your Project

Minimal Example

Replace the content of src/App.tsx (or src/App.jsx) with:

TypeScript:

import { CircularChart3DComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';

function App() {
  return <CircularChart3DComponent />;
}

export default App;

JavaScript:

import { CircularChart3DComponent } from '@syncfusion/ej2-react-charts';
import React from 'react';

function App() {
  return <CircularChart3DComponent />;
}

export default App;

Run the Application

Start the development server:

npm run dev

This compiles your code and opens the application in your browser. You should see an empty 3D Circular Chart component.

Creating Your First Pie Chart with Data

Now let's add actual data to create a meaningful pie chart.

Understanding Data Binding

The 3D Circular Chart uses three key properties for data binding:

• `dataSource`: Array of data objects
• `xName`: Property name for labels (categories)
• `yName`: Property name for values

Complete Working Example

import * as ReactDOM from 'react-dom';
import {
    CircularChart3DComponent,
    CircularChart3DSeriesCollectionDirective,
    CircularChart3DSeriesDirective,
    PieSeries3D,
    Inject
  } from '@syncfusion/ej2-react-charts';
  import * as React from 'react';
  
  function App() {
    // Sample data
    const data = [
      { product: 'Laptops', sales: 35 },
      { product: 'Phones', sales: 28 },
      { product: 'Tablets', sales: 20 },
      { product: 'Accessories', sales: 17 }
    ];
  
    return (
      <CircularChart3DComponent
        id="chart"
        title="Product Sales Distribution"
        width="600px"
        height="450px"
      >
        {/* Inject required module */}
        <Inject services={[PieSeries3D]} />
        
        {/* Define series */}
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="product"  // Maps to 'product' property
            yName="sales"    // Maps to 'sales' property
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    );
  }
  
export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);

What's Happening?

1. Import Components: We import the chart component, series directives, and PieSeries3D module 2. Create Data: Define an array of objects with labels and values 3. Inject Module: Use <Inject services={[PieSeries3D]} /> to enable pie chart functionality 4. Map Data: Use xName and yName to map data properties to chart axes 5. Render: The chart automatically renders as a pie chart by default

Key Points

• Default Behavior: By default, assigning data creates a pie chart (not a donut)
• Module Injection: Always inject PieSeries3D for pie/donut charts
• Data Format: Data can be any array of objects with consistent properties
• Field Mapping: xName and yName must match your data object property names

Customizing the Basic Chart

Setting Chart Dimensions

<CircularChart3DComponent
  width="800px"
  height="600px"
>
  {/* ... */}
</CircularChart3DComponent>

Setting Chart Radius

By default, the chart uses 80% of the available space. You can customize it:

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="product"
  yName="sales"
  radius="70%"  // Custom radius
/>

Adding a Title

<CircularChart3DComponent
  title="Sales Analysis 2024"
  subTitle="Quarterly Report"
>
  {/* ... */}
</CircularChart3DComponent>

Common Patterns

Using External Data (API/JSON)

function App() {
  const [chartData, setChartData] = React.useState([]);

  React.useEffect(() => {
    // Fetch data from API
    fetch('/api/sales-data')
      .then(response => response.json())
      .then(data => setChartData(data));
  }, []);

  return (
    <CircularChart3DComponent>
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={chartData}
          xName="category"
          yName="value"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Multiple Data Fields

If your data has multiple value fields:

const data = [
  { category: 'Q1', revenue: 45000, expenses: 32000 },
  { category: 'Q2', revenue: 52000, expenses: 35000 }
];

// Show revenue
<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="revenue"  // Choose which field to visualize
/>

Troubleshooting

Chart Not Rendering

Problem: Blank screen or console errors

Solutions: 1. Verify you installed the package: npm install @syncfusion/ej2-react-charts 2. Check CSS import is present in your component 3. Ensure PieSeries3D is injected via <Inject services={[PieSeries3D]} /> 4. Verify xName and yName match your data object properties exactly

Module Injection Error

Problem: Error like "Module not injected"

Solution: Always include the Inject component:

<Inject services={[PieSeries3D]} />

Data Not Displaying

Problem: Chart renders but shows no data

Solutions: 1. Check xName and yName match your data properties (case-sensitive) 2. Verify dataSource is a valid array 3. Ensure data values are numbers, not strings 4. Check browser console for warnings

TypeScript Errors

Problem: Type errors with imports

Solution: Ensure you're using correct import names:

// Correct
import { CircularChart3DComponent } from '@syncfusion/ej2-react-charts';

// Not: CircularChartComponent or Chart3DComponent

Next Steps

Now that you have a basic 3D Circular Chart running, explore:

• Pie and Donut Charts: Create donut charts with inner radius
• Data Labels: Add labels to display values on chart slices
• Legends: Show legend for better data understanding
• Tooltips: Enable interactive tooltips on hover
• Export: Export charts as images or PDFs

Summary

You've learned how to:

• ✅ Install Syncfusion React Charts package
• ✅ Create a React application with Vite or Create React App
• ✅ Import and apply CSS themes
• ✅ Create a basic 3D Circular Chart
• ✅ Bind data using dataSource, xName, and yName
• ✅ Inject required modules (PieSeries3D)
• ✅ Customize chart with title and dimensions

Your 3D Circular Chart is now ready for advanced customization!

Legend

This guide covers adding and customizing legends in 3D Circular Charts, including positioning, alignment, pagination, styling, and advanced legend features.

Table of Contents

• Overview
• Enabling Legend
• Position and Alignment
• Legend Reverse
• Legend Shape
• Legend Size
• Legend Item Size
• Legend Paging
• Text Wrap
• Legend Title
• Arrow Page Navigation
• Item Padding

Overview

Legends provide information about data points in the chart, making it easy to understand what each color/slice represents. They're especially useful when chart slices are small or numerous.

Enabling Legend

Module Injection

First, inject the CircularChartLegend3D module:

import {
  CircularChart3DComponent,
  CircularChart3DSeriesCollectionDirective,
  CircularChart3DSeriesDirective,
  PieSeries3D,
  CircularChartLegend3D,  // Import legend module
  Inject
} from '@syncfusion/ej2-react-charts';

Basic Legend Setup

Enable the legend by setting visible: true in legendSettings:

function LegendExample() {
  const data = [
    { product: 'Laptops', sales: 35 },
    { product: 'Phones', sales: 28 },
    { product: 'Tablets', sales: 20 },
    { product: 'Accessories', sales: 17 }
  ];

  return (
    <CircularChart3DComponent
      id="chart"
      title="Product Sales"
      legendSettings={{ visible: true }}  // Enable legend
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="product"
          yName="sales"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Result: A legend appears on the right side showing all product categories with their colors.

Position and Alignment

Control where the legend appears and how it's aligned within that position.

Position Options

The legend can be positioned at four locations:

• `Right` (default)
• `Left`
• `Top`
• `Bottom`

Alignment Options

Within each position, legends can be aligned:

• `Center` (default)
• `Near` (start of the position)
• `Far` (end of the position)

Position Examples

// Right side (default)
<CircularChart3DComponent
  legendSettings={{
    visible: true,
    position: 'Right'
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

// Bottom center
<CircularChart3DComponent
  legendSettings={{
    visible: true,
    position: 'Bottom',
    alignment: 'Center'
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

// Top left corner
<CircularChart3DComponent
  legendSettings={{
    visible: true,
    position: 'Top',
    alignment: 'Near'
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

Complete Position Demo

function PositionDemo() {
  const data = [
    { category: 'A', value: 35 },
    { category: 'B', value: 28 },
    { category: 'C', value: 22 },
    { category: 'D', value: 15 }
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
      <CircularChart3DComponent
        title="Legend: Right"
        legendSettings={{ visible: true, position: 'Right' }}
      >
        <Inject services={[PieSeries3D, CircularChartLegend3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="category"
            yName="value"
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>

      <CircularChart3DComponent
        title="Legend: Bottom"
        legendSettings={{ visible: true, position: 'Bottom' }}
      >
        <Inject services={[PieSeries3D, CircularChartLegend3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="category"
            yName="value"
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    </div>
  );
}

Legend Reverse

Reverse the order of legend items using the reverse property.

Default Order (First to Last)

By default, the first data point appears first in the legend.

Reversed Order (Last to First)

function ReversedLegend() {
  const data = [
    { rank: '1st Place', score: 95 },
    { rank: '2nd Place', score: 87 },
    { rank: '3rd Place', score: 76 },
    { rank: '4th Place', score: 65 }
  ];

  return (
    <CircularChart3DComponent
      title="Competition Results"
      legendSettings={{
        visible: true,
        reverse: true  // Reverse legend order
      }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="rank"
          yName="score"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Use case: Show most important items last, or reverse chronological order.

Legend Shape

Customize the shape of legend markers using legendShape in the series.

Available Shapes

• `Circle`
• `Rectangle`
• `Triangle`
• `Diamond`
• `Cross`
• `HorizontalLine`
• `VerticalLine`
• `Pentagon`
• `InvertedTriangle`
• `SeriesType` (default - matches series type)

Custom Shape Example

function CustomShapes() {
  const data = [
    { status: 'Active', count: 45 },
    { status: 'Pending', count: 28 },
    { status: 'Completed', count: 27 }
  ];

  return (
    <CircularChart3DComponent
      title="Project Status"
      legendSettings={{ visible: true }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="status"
          yName="count"
          legendShape="Diamond"  // Diamond markers
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Legend Size

Control the overall dimensions of the legend container.

Setting Width and Height

<CircularChart3DComponent
  title="Sales Data"
  legendSettings={{
    visible: true,
    width: '200px',   // Legend container width
    height: '150px'   // Legend container height
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

Responsive Legend

function ResponsiveLegend() {
  const data = [
    { region: 'North America', revenue: 45 },
    { region: 'Europe', revenue: 30 },
    { region: 'Asia Pacific', revenue: 25 }
  ];

  return (
    <CircularChart3DComponent
      title="Regional Revenue"
      width="100%"
      legendSettings={{
        visible: true,
        width: '25%',    // Percentage-based width
        position: 'Right'
      }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="region"
          yName="revenue"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Legend Item Size

Customize the size of individual legend markers (shapes).

Shape Height and Width

<CircularChart3DComponent
  title="Product Categories"
  legendSettings={{
    visible: true,
    shapeHeight: 15,  // Marker height in pixels
    shapeWidth: 15    // Marker width in pixels
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

Custom Item Sizing

function CustomItemSize() {
  const data = [
    { category: 'Premium', value: 35 },
    { category: 'Standard', value: 45 },
    { category: 'Basic', value: 20 }
  ];

  return (
    <CircularChart3DComponent
      title="Subscription Tiers"
      legendSettings={{
        visible: true,
        position: 'Bottom',
        shapeHeight: 20,  // Larger markers
        shapeWidth: 20
      }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="value"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Tip: Larger markers (15-25px) are better for accessibility and touch interfaces.

Legend Paging

When legend items exceed available space, pagination is automatically enabled with navigation buttons.

Automatic Paging

Paging activates automatically when there are many legend items:

function ManyLegendItems() {
  // Generate many data points
  const data = Array.from({ length: 20 }, (_, i) => ({
    item: `Item ${i + 1}`,
    value: Math.floor(Math.random() * 50) + 10
  }));

  return (
    <CircularChart3DComponent
      title="Many Categories"
      height="600px"
      legendSettings={{
        visible: true,
        position: 'Right',
        width: '150px',
        height: '400px'
      }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="item"
          yName="value"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Features:

• Previous/Next buttons appear automatically
• Page number indicator shows current page
• Users can navigate through legend items
• Click-through still works on all items

Text Wrap

Control how legend text wraps when it exceeds the available width.

Text Wrap Property

<CircularChart3DComponent
  legendSettings={{
    visible: true,
    textWrap: 'Wrap'  // Options: 'Normal', 'Wrap', 'Trim'
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

Maximum Label Width

function TextWrapExample() {
  const data = [
    { product: 'Very Long Product Name That Exceeds Width', sales: 35 },
    { product: 'Another Extremely Long Category Name', sales: 28 },
    { product: 'Short', sales: 20 },
    { product: 'Medium Length Product', sales: 17 }
  ];

  return (
    <CircularChart3DComponent
      title="Product Sales"
      legendSettings={{
        visible: true,
        textWrap: 'Wrap',
        maximumLabelWidth: 100,  // Wrap after 100px
        width: '200px'
      }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="product"
          yName="sales"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Text Wrap Options

• `Normal`: No wrapping, text may overflow
• `Wrap`: Wrap text to next line
• `Trim`: Truncate with ellipsis (...)

Legend Title

Add a title to the legend for additional context.

Basic Title

<CircularChart3DComponent
  legendSettings={{
    visible: true,
    title:  'Product Categories'
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

Styled Title

function StyledLegendTitle() {
  const data = [
    { quarter: 'Q1 2024', revenue: 45000 },
    { quarter: 'Q2 2024', revenue: 52000 },
    { quarter: 'Q3 2024', revenue: 48000 },
    { quarter: 'Q4 2024', revenue: 55000 }
  ];

  return (
    <CircularChart3DComponent
      title="Quarterly Performance"
      legendSettings={{
        visible: true,
        position: 'Bottom',
        title: 'Fiscal Quarters',
        textStyle: {
          size: '14px',
          fontWeight: 'Bold',
          color: '#2196F3',
          fontFamily: 'Arial',
          textAlignment: 'Center',
        },
      }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="quarter"
          yName="revenue"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Title Style Properties

• `size`: Font size (e.g., '12px', '14px')
• `fontWeight`: 'Normal', 'Bold', '600'
• `color`: Text color
• `fontFamily`: Font name
• `textAlignment`: 'Near', 'Center', 'Far'
• `textOverflow`: 'None', 'Trim', 'Wrap'

Arrow Page Navigation

Disable page numbers and use arrow buttons only for cleaner pagination.

Enable Arrow Navigation

function ArrowNavigation() {
  // Many items to trigger pagination
  const data = Array.from({ length: 15 }, (_, i) => ({
    category: `Category ${String.fromCharCode(65 + i)}`,
    value: Math.floor(Math.random() * 30) + 10
  }));

  return (
    <CircularChart3DComponent
      title="Many Categories"
      height="500px"
      legendSettings={{
        visible: true,
        position: 'Right',
        width: '150px',
        height: '300px',
        enablePages: false  // Hide page numbers, show only arrows
      }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="value"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Comparison:

• `enablePages: true` (default): Shows "Page 1 of 3" with arrows
• `enablePages: false`: Shows only left/right arrow buttons

Item Padding

Adjust spacing between legend items for better readability.

Setting Item Padding

<CircularChart3DComponent
  legendSettings={{
    visible: true,
    itemPadding: 15  // Padding in pixels between items
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

Padding Example

function PaddingComparison() {
  const data = [
    { type: 'Type A', value: 30 },
    { type: 'Type B', value: 25 },
    { type: 'Type C', value: 25 },
    { type: 'Type D', value: 20 }
  ];

  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <CircularChart3DComponent
        title="Default Padding"
        legendSettings={{
          visible: true,
          position: 'Bottom'
          // itemPadding: 8 (default)
        }}
      >
        <Inject services={[PieSeries3D, CircularChartLegend3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="type"
            yName="value"
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>

      <CircularChart3DComponent
        title="Large Padding"
        legendSettings={{
          visible: true,
          position: 'Bottom',
          itemPadding: 20  // More spacing
        }}
      >
        <Inject services={[PieSeries3D, CircularChartLegend3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="type"
            yName="value"
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    </div>
  );
}

Guidelines:

• Default: 8px (compact)
• Medium: 12-15px (balanced)
• Large: 20px+ (spacious, touch-friendly)

Complete Configuration Example

function FullyConfiguredLegend() {
  const data = [
    { category: 'Electronics', sales: 45, color: '#2196F3' },
    { category: 'Clothing', sales: 28, color: '#4CAF50' },
    { category: 'Home & Garden', sales: 18, color: '#FF9800' },
    { category: 'Sports', sales: 9, color: '#9C27B0' }
  ];

  return (
    <CircularChart3DComponent
      title="Sales by Department"
      width="800px"
      height="500px"
      legendSettings={{
        visible: true,
        position: 'Bottom',
        alignment: 'Center',
        width: '100%',
        height: '100px',
        shapeHeight: 18,
        shapeWidth: 18,
        itemPadding: 15,
        textWrap: 'Wrap',
        maximumLabelWidth: 150,
        title: 'Departments',
        textStyle: {
          size: '13px',
          fontWeight: 'Bold',
          color: '#333'
        }
      }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="sales"
          pointColorMapping="color"
          legendShape="Circle"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Summary

You've learned how to:

• ✅ Enable legends with CircularChartLegend3D module
• ✅ Position legends (Left, Right, Top, Bottom)
• ✅ Align legends (Near, Center, Far)
• ✅ Reverse legend order
• ✅ Customize legend shapes (Circle, Diamond, Triangle, etc.)
• ✅ Set legend size (width and height)
• ✅ Customize marker size (shapeHeight, shapeWidth)
• ✅ Enable automatic pagination for many items
• ✅ Wrap and truncate long text labels
• ✅ Add and style legend titles
• ✅ Use arrow-only navigation
• ✅ Adjust item spacing with padding

Best Practices:

• Use Bottom position for many horizontal items
• Use Right position for vertical layouts
• Enable text wrap for long category names
• Increase padding for touch interfaces
• Add titles for complex multi-series charts

Pie and Donut Charts

This guide covers creating and customizing pie and donut chart variations using the 3D Circular Chart component, including radius customization, varied slice sizes, color mapping, and point-level customization.

Table of Contents

• Pie Chart Basics
• Radius Customization
• Various Radius Pie Chart
• Donut Chart
• Text and Fill Color Mapping
• Point Customization

Pie Chart Basics

A pie chart displays data as proportional slices of a circle, making it perfect for showing percentages and parts of a whole.

Module Injection

To render a pie series, you must inject the PieSeries3D module:

import {
  CircularChart3DComponent,
  CircularChart3DSeriesCollectionDirective,
  CircularChart3DSeriesDirective,
  PieSeries3D,
  Inject
} from '@syncfusion/ej2-react-charts';

<CircularChart3DComponent>
  <Inject services={[PieSeries3D]} />
  {/* Chart series */}
</CircularChart3DComponent>

Basic Pie Chart

import * as ReactDOM from 'react-dom';
import {
  CircularChart3DComponent,
  CircularChart3DSeriesCollectionDirective,
  CircularChart3DSeriesDirective,
  PieSeries3D,
  Inject,
  CircularChartLegend3D,
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';

function App() {
  const data = [
    { category: 'Electronics', sales: 45, color: '#2196F3' },
    { category: 'Clothing', sales: 28, color: '#4CAF50' },
    { category: 'Home & Garden', sales: 18, color: '#FF9800' },
    { category: 'Sports', sales: 9, color: '#9C27B0' },
  ];

  return (
    <CircularChart3DComponent id="pie-chart" title="Browser Market Share">
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="sales"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

export default App;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);

Result: A 3D pie chart with four slices representing browser usage percentages.

Radius Customization

By default, the pie chart radius is 80% of the chart's size (minimum of width and height). You can customize this using the radius property.

Default Radius (80%)

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="value"
  // radius="80%" is the default
/>

Custom Radius

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="category"
  yName="value"
  radius="60%"  // Smaller pie
/>

Common Radius Values

• `50%`: Small, compact pie
• `70%`: Medium size (good for charts with legends)
• `80%`: Default size
• `90%`: Large pie filling most of the chart area
• `100%`: Maximum size (touches chart edges)

Example: Side-by-Side Size Comparison

function RadiusComparison() {
  const data = [
    { item: 'A', value: 30 },
    { item: 'B', value: 40 },
    { item: 'C', value: 30 }
  ];

  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <CircularChart3DComponent
        title="Small (50%)"
        width="300px"
        height="300px"
      >
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="item"
            yName="value"
            radius="50%"
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>

      <CircularChart3DComponent
        title="Large (90%)"
        width="300px"
        height="300px"
      >
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="item"
            yName="value"
            radius="90%"
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    </div>
  );
}

Various Radius Pie Chart

You can create a unique "exploded" or "varied" pie chart where each slice has a different radius, creating a dynamic visual effect.

How It Works

Add a radius property to each data object, and the chart will use those individual radius values:

function VariousRadiusPie() {
  const data = [
    { category: 'Product A', sales: 35, radius: '100' },  // Largest slice
    { category: 'Product B', sales: 25, radius: '80' },
    { category: 'Product C', sales: 20, radius: '70' },
    { category: 'Product D', sales: 20, radius: '60' }    // Smallest slice
  ];

  return (
    <CircularChart3DComponent
      id="various-radius-chart"
      title="Product Sales with Emphasis"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="sales"
          radius="radius"  // Uses radius from data
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Use Cases

Emphasis: Make important slices larger to draw attention

{ category: 'Top Performer', value: 40, radius: '100' }  // Emphasized
{ category: 'Others', value: 60, radius: '70' }          // De-emphasized

Progressive Display: Create a cascading or layered effect

const data = [
  { month: 'Jan', value: 25, radius: '100' },
  { month: 'Feb', value: 25, radius: '90' },
  { month: 'Mar', value: 25, radius: '80' },
  { month: 'Apr', value: 25, radius: '70' }
];

Donut Chart

A donut chart is a pie chart with a hollow center, created by setting an innerRadius. This creates a ring shape that's often more visually appealing and can contain center text.

Creating a Donut Chart

Set the innerRadius property to any value greater than 0%:

function DonutChartExample() {
  const data = [
    { category: 'Marketing', budget: 40 },
    { category: 'Development', budget: 35 },
    { category: 'Operations', budget: 25 }
  ];

  return (
    <CircularChart3DComponent
      id="donut-chart"
      title="Budget Allocation"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="budget"
          innerRadius="40%"  // Creates donut
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

InnerRadius Values

The innerRadius property accepts values from 0% to 100% of the pie radius:

• `0%`: Standard pie chart (no hole)
• `30%`: Thin ring, large center
• `40-50%`: Balanced donut (most common)
• `60-70%`: Thick ring, small hole
• `80%+`: Very thick ring (unusual but possible)

Common Donut Configurations

Classic Donut (balanced ring):

<CircularChart3DSeriesDirective
  radius="80%"
  innerRadius="40%"  // Half of radius
/>

Thin Ring (emphasis on center):

<CircularChart3DSeriesDirective
  radius="80%"
  innerRadius="60%"  // Large hole
/>

Thick Donut (emphasis on data):

<CircularChart3DSeriesDirective
  radius="90%"
  innerRadius="30%"  // Small hole
/>

Pie vs. Donut Comparison

function PieVsDonut() {
  const data = [
    { type: 'A', value: 35 },
    { type: 'B', value: 30 },
    { type: 'C', value: 35 }
  ];

  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      {/* Pie Chart */}
      <CircularChart3DComponent title="Pie Chart">
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="type"
            yName="value"
            // No innerRadius = Pie
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>

      {/* Donut Chart */}
      <CircularChart3DComponent title="Donut Chart">
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="type"
            yName="value"
            innerRadius="40%"  // Donut
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    </div>
  );
}

Text and Fill Color Mapping

You can map custom text labels and colors directly from your data source using pointColorMapping.

Color Mapping

Instead of using automatic colors, specify colors in your data:

function ColorMappedChart() {
  const data = [
    { status: 'Success', count: 85, color: '#4CAF50' },   // Green
    { status: 'Warning', count: 10, color: '#FFC107' },   // Yellow
    { status: 'Error', count: 5, color: '#F44336' }       // Red
  ];

  return (
    <CircularChart3DComponent title="System Status">
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="status"
          yName="count"
          pointColorMapping="color"  // Map colors from data
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Custom Text with Name Property

You can provide custom display text separate from the data value:

const data = [
  { id: 'prod_1', name: 'Premium Plan', revenue: 50000, color: '#673AB7' },
  { id: 'prod_2', name: 'Basic Plan', revenue: 30000, color: '#2196F3' },
  { id: 'prod_3', name: 'Free Plan', revenue: 20000, color: '#9E9E9E' }
];

<CircularChart3DSeriesDirective
  dataSource={data}
  xName="name"              // Display name instead of id
  yName="revenue"
  pointColorMapping="color"
/>

Complete Example with Both Mappings

function FullyMappedChart() {
  const salesData = [
    {
      region: 'North America',
      displayName: 'NA Region',
      sales: 45,
      color: '#1E88E5',
      text: '45% - NA'
    },
    {
      region: 'Europe',
      displayName: 'EU Region',
      sales: 30,
      color: '#43A047',
      text: '30% - EU'
    },
    {
      region: 'Asia Pacific',
      displayName: 'APAC Region',
      sales: 25,
      color: '#E53935',
      text: '25% - APAC'
    }
  ];

  return (
    <CircularChart3DComponent title="Global Sales Distribution">
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={salesData}
          xName="displayName"         // Custom labels
          yName="sales"
          pointColorMapping="color"   // Custom colors
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Point Customization

Use the pointRender event to customize individual points dynamically based on conditions or data values.

Understanding pointRender

The pointRender event fires for each data point before rendering, allowing you to modify:

• Fill color
• Border properties
• Visibility
• Any other point-specific styling

Basic Point Customization

function CustomizedPoints() {
  const data = [
    { product: 'Product A', sales: 45 },
    { product: 'Product B', sales: 30 },
    { product: 'Product C', sales: 25 }
  ];

  const handlePointRender = (args) => {
    // Customize based on point index
    const colors = ['#FF6384', '#36A2EB', '#FFCE56'];
    args.fill = colors[args.point.index];
  };

  return (
    <CircularChart3DComponent
      title="Sales by Product"
      pointRender={handlePointRender}
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="product"
          yName="sales"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Conditional Styling

Highlight specific points based on data values:

function ConditionalStyling() {
  const data = [
    { category: 'Q1', revenue: 25000 },
    { category: 'Q2', revenue: 35000 },  // Best quarter
    { category: 'Q3', revenue: 28000 },
    { category: 'Q4', revenue: 30000 }
  ];

  const handlePointRender = (args) => {
    // Highlight best performer in gold
    if (args.point.y > 33000) {
      args.fill = '#FFD700';  // Gold
      args.border = { color: '#FFA500', width: 3 };
    }
    // Mark low performers in gray
    else if (args.point.y < 27000) {
      args.fill = '#BDBDBD';  // Gray
    }
  };

  return (
    <CircularChart3DComponent
      title="Quarterly Revenue"
      pointRender={handlePointRender}
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="revenue"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Advanced: Pattern-Based Styling

function PatternStyling() {
  const data = [
    { dept: 'Engineering', budget: 40 },
    { dept: 'Marketing', budget: 30 },
    { dept: 'Sales', budget: 20 },
    { dept: 'Support', budget: 10 }
  ];

  const handlePointRender = (args) => {
    const pointName = args.point.x.toLowerCase();
    
    // Apply department-specific colors
    if (pointName.includes('engineering')) {
      args.fill = '#2196F3';  // Blue for tech
    } else if (pointName.includes('marketing')) {
      args.fill = '#FF9800';  // Orange for marketing
    } else if (pointName.includes('sales')) {
      args.fill = '#4CAF50';  // Green for sales
    } else {
      args.fill = '#9C27B0';  // Purple for others
    }

    // Add border to all points
    args.border = { color: '#ffffff', width: 2 };
  };

  return (
    <CircularChart3DComponent
      title="Department Budget"
      pointRender={handlePointRender}
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="dept"
          yName="budget"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Summary

You've learned how to:

• ✅ Create basic pie charts with PieSeries3D injection
• ✅ Customize chart radius (default 80%, adjustable)
• ✅ Create various radius pie charts for emphasis
• ✅ Build donut charts using innerRadius property
• ✅ Map custom colors from data with pointColorMapping
• ✅ Use custom text labels from data
• ✅ Dynamically customize points with pointRender event

Next Steps: Add data labels, legends, or tooltips to enhance your pie and donut charts.

Print and Export

This guide covers printing and exporting 3D Circular Charts to various formats including JPEG, PNG, SVG, and PDF.

Table of contents

• Overview
• Print Functionality
• Enabling Print
• Basic Print Setup
• Print Method
• Print with ID
• Export to Image Formats
• Module Injection
• Basic Image Export
• Export Method Signature
• Export to PDF
• Module Injection
• Basic PDF Export
• Complete Export Example
• Troubleshooting
• Summary

Overview

The 3D Circular Chart component provides built-in functionality to print charts directly from the browser and export them to multiple file formats for reports, presentations, and documentation.

Print Functionality

Enabling Print

The print feature allows users to print charts directly from the browser without needing screenshots.

Basic Print Setup

import { useRef } from 'react';

function PrintExample() {
  const chartRef = useRef(null);

  const data = [
    { category: 'Product A', sales: 35 },
    { category: 'Product B', sales: 28 },
    { category: 'Product C', sales: 22 },
    { category: 'Product D', sales: 15 }
  ];

  const handlePrint = () => {
    if (chartRef.current) {
      chartRef.current.print();
    }
  };

  return (
    <div>
      <button onClick={handlePrint}>Print Chart</button>
      
      <CircularChart3DComponent
        ref={chartRef}
        id="chart"
        title="Product Sales Distribution"
      >
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="category"
            yName="sales"
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    </div>
  );
}

Print Method

Call the print() method on the chart instance:

chartRef.current.print();

What happens: 1. Browser print dialog opens 2. Chart renders in print-optimized format 3. User can select printer or save as PDF 4. Page margins and orientation can be adjusted

Print with ID

Alternatively, pass the chart ID to the print method:

function PrintWithId() {
  const data = [
    { item: 'A', value: 30 },
    { item: 'B', value: 25 },
    { item: 'C', value: 25 },
    { item: 'D', value: 20 }
  ];

  const handlePrint = () => {
    const chart = document.getElementById('myChart');
    if (chart) {
      chart.ej2_instances[0].print();
    }
  };

  return (
    <div>
      <button onClick={handlePrint}>Print</button>
      
      <CircularChart3DComponent
        id="myChart"
        title="Data Distribution"
      >
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={data}
            xName="item"
            yName="value"
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    </div>
  );
}

Export to Image Formats

Export charts to JPEG, PNG, or SVG formats.

Module Injection

First, inject the CircularChart3DExport module:

import {
  CircularChart3DComponent,
  CircularChart3DSeriesCollectionDirective,
  CircularChart3DSeriesDirective,
  PieSeries3D,
  CircularChart3DExport,  // Import export module
  Inject
} from '@syncfusion/ej2-react-charts';

Basic Image Export

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect, useRef } from 'react';
import {
  CircularChart3DSeriesDirective,
  CircularChart3DSeriesCollectionDirective,
  Inject,
  CircularChart3DComponent,
  CircularChartDataLabel3D,
  CircularChartLegend3D,
  PieSeries3D,
  CircularChartExport3D,
} from '@syncfusion/ej2-react-charts';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

export let circularData = [
  { x: 'John', y: 10, dataLabelMappingName: '$10k' },
  { x: 'Jake', y: 12, dataLabelMappingName: '$12k' },
  { x: 'Peter', y: 18, dataLabelMappingName: '$18k' },
  { x: 'James', y: 11, dataLabelMappingName: '$11k' },
  { x: 'Mary', y: 9.7, dataLabelMappingName: '$9.7k' },
];

function Print() {
  useEffect(() => {
    const button = document.getElementById('chart-print');
    button.addEventListener('click', onClick);
  }, []);
  let chartInstance = useRef(null);

  
const exportChart = (type: 'JPEG' | 'PDF' | 'SVG') => {
    chartInstance.current?.export(type, 'circular-chart');
  };

  return (
    <div className="control-pane">
      <div className="control-section row">
        <div className="col-lg-9">
          <CircularChart3DComponent
            id="charts"
            ref={chartInstance}
            title="Browser Market Shares in November 2023"
            tilt={-45}
            enableExport={true}
            legendSettings={{ visible: false, position: 'Right' }}
          >
            <Inject
              services={[
                PieSeries3D,
                CircularChartDataLabel3D,
                CircularChartLegend3D,
                CircularChartExport3D,
              ]}
            />
            <CircularChart3DSeriesCollectionDirective>
              <CircularChart3DSeriesDirective
                dataSource={circularData}
                xName="x"
                yName="y"
                dataLabel={{
                  visible: true,
                  position: 'Inside',
                  name: 'x',
                  font: { fontWeight: '600', color: 'white' },
                }}
              ></CircularChart3DSeriesDirective>
            </CircularChart3DSeriesCollectionDirective>
          </CircularChart3DComponent>
        </div>
        <div className="col-lg-3 property-section">
          <ButtonComponent
            id="chart-print"
            iconCss="e-icons e-print-icon"
            cssClass="e-flat"
            isPrimary={true}
          >
            Export
          </ButtonComponent>
        </div>
      </div>
    </div>
  );
}
export default Print;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<Print />);

Export Method Signature

chart.export(type, fileName, orientation, controls, width, height);

Parameters:

• `type`: 'PNG' | 'JPEG' | 'SVG'
• `fileName`: Name of the downloaded file (without extension)
• `orientation`: (optional) 'Portrait' | 'Landscape'
• `controls`: (optional) Array of chart controls
• `width`: (optional) Export width in pixels
• `height`: (optional) Export height in pixels

Custom File Names

const exportWithCustomName = () => {
  const timestamp = new Date().toISOString().split('T')[0];
  chartRef.current.export('PNG', `sales-report-${timestamp}`);
};

// Downloads as: sales-report-2024-03-23.png

Export Format Comparison

function FormatComparison() {
  const chartRef = useRef(null);
  const data = [/* data */];

  const exportOptions = [
    {
      format: 'PNG',
      label: 'PNG (Best for web)',
      description: 'Lossless, supports transparency'
    },
    {
      format: 'JPEG',
      label: 'JPEG (Smaller file size)',
      description: 'Lossy compression, no transparency'
    },
    {
      format: 'SVG',
      label: 'SVG (Vector)',
      description: 'Scalable, best for print'
    }
  ];

  return (
    <div>
      {exportOptions.map((option) => (
        <button
          key={option.format}
          onClick={() => chartRef.current.export(option.format, 'chart')}
          title={option.description}
        >
          {option.label}
        </button>
      ))}
      
      <CircularChart3DComponent ref={chartRef} /* ... */ />
    </div>
  );
}

Parameters:

• `fileName`: (optional) Name of PDF file (without .pdf extension)

Complete Export Example

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import {
  CircularChart3DSeriesDirective,
  CircularChart3DSeriesCollectionDirective,
  Inject,
  CircularChart3DComponent,
  CircularChartLegend3D,
  PieSeries3D,
  CircularChartExport3D
} from '@syncfusion/ej2-react-charts';

export let circularData = [
  { x: 'John', y: 10, dataLabelMappingName: '$10k' },
  { x: 'Jake', y: 12, dataLabelMappingName: '$12k' },
  { x: 'Peter', y: 18, dataLabelMappingName: '$18k' },
  { x: 'James', y: 11, dataLabelMappingName: '$11k' },
  { x: 'Mary', y: 9.7, dataLabelMappingName: '$9.7k' },
];

function Print() {
    const chartRef = useRef(null);

    const data = [
      { category: 'Electronics', revenue: 450000, color: '#2196F3' },
      { category: 'Clothing', revenue: 380000, color: '#4CAF50' },
      { category: 'Home & Garden', revenue: 320000, color: '#FF9800' },
      { category: 'Sports', revenue: 250000, color: '#9C27B0' }
    ];
  
    const handlePrint = () => {
      chartRef.current?.print();
    };
  
    const handleExport = (format) => {
      const timestamp = new Date().toISOString().slice(0, 10);
      const fileName = `revenue-report-${timestamp}`;
      
      if (format === 'PDF') {
        chartRef.current?.pdfExport(fileName);
      } else {
        chartRef.current?.export(format, fileName);
      }
    };
  
    return (
      <div>
        <div style={{
          display: 'flex',
          gap: '10px',
          marginBottom: '20px',
          padding: '10px',
          background: '#f5f5f5',
          borderRadius: '4px'
        }}>
          <button onClick={handlePrint}>
            🖨️ Print
          </button>
          <button onClick={() => handleExport('PNG')}>
            📷 Export PNG
          </button>
          <button onClick={() => handleExport('JPEG')}>
            🖼️ Export JPEG
          </button>
          <button onClick={() => handleExport('SVG')}>
            📐 Export SVG
          </button>
          <button onClick={() => handleExport('PDF')}>
            📄 Export PDF
          </button>
        </div>
        
        <CircularChart3DComponent
          ref={chartRef}
          id="revenue-chart"
          title="Department Revenue - FY 2024"
          subTitle="Total Revenue: $1.4M"
          width="800px"
          height="600px"
          enableExport={true}
          legendSettings={{ visible: true, position: 'Bottom' }}
        >
          <Inject services={[
            PieSeries3D,
            CircularChartLegend3D,
            CircularChartExport3D
          ]} />
          <CircularChart3DSeriesCollectionDirective>
            <CircularChart3DSeriesDirective
              dataSource={data}
              xName="category"
              yName="revenue"
              pointColorMapping="color"
            />
          </CircularChart3DSeriesCollectionDirective>
        </CircularChart3DComponent>
      </div>
    );
}
export default Print;
const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<Print />);

Custom Export Dimensions

Control the size of exported images and PDFs.

Fixed Dimensions

const exportLarge = () => {
  chartRef.current.export(
    'PNG',
    'chart-large',
    null,   // orientation
    null,   // controls
    1920,   // width
    1080    // height
  );
};

const exportSmall = () => {
  chartRef.current.export(
    'PNG',
    'chart-thumbnail',
    null,
    null,
    400,    // width
    300     // height
  );
};

Troubleshooting

Export Not Working

Problem: Export button does nothing or throws errors.

Solutions: 1. Verify module injection:

   <Inject services={[PieSeries3D, CircularChart3DExport]} />

2. Check chart ref is properly set:

   const chartRef = useRef(null);
   <CircularChart3DComponent ref={chartRef} />

3. Ensure chart has rendered before exporting

Print Quality Issues

Problem: Printed chart looks pixelated or cut off.

Solutions: 1. Set explicit chart dimensions:

   <CircularChart3DComponent width="800px" height="600px" />

2. Adjust browser print settings (scale, margins) 3. Use landscape orientation for wide charts

PDF Export Issues

Problem: PDF export not available or errors.

Solutions: 1. Inject CircularChart3DPdfExport module 2. Check console for licensing errors 3. Verify Syncfusion license is registered

File Not Downloading

Problem: Export method runs but no file downloads.

Solutions: 1. Check browser pop-up blocker settings 2. Verify browser allows downloads 3. Check console for JavaScript errors 4. Test in different browser

Export Menu

function ExportMenu() {
  const chartRef = useRef(null);
  const [menuOpen, setMenuOpen] = React.useState(false);

  const exportFormats = [
    { type: 'PNG', icon: '📷', label: 'PNG Image' },
    { type: 'JPEG', icon: '🖼️', label: 'JPEG Image' },
    { type: 'SVG', icon: '📐', label: 'SVG Vector' },
    { type: 'PDF', icon: '📄', label: 'PDF Document' }
  ];

  const handleExport = (format) => {
    if (format === 'PDF') {
      chartRef.current.pdfExport('chart');
    } else {
      chartRef.current.export(format, 'chart');
    }
    setMenuOpen(false);
  };

  return (
    <div>
      <div style={{ position: 'relative' }}>
        <button onClick={() => setMenuOpen(!menuOpen)}>
          Export ▼
        </button>
        
        {menuOpen && (
          <div style={{
            position: 'absolute',
            background: 'white',
            border: '1px solid #ccc',
            borderRadius: '4px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
            zIndex: 1000
          }}>
            {exportFormats.map((format) => (
              <button
                key={format.type}
                onClick={() => handleExport(format.type)}
                style={{
                  display: 'block',
                  width: '100%',
                  padding: '8px 16px',
                  textAlign: 'left',
                  border: 'none',
                  background: 'transparent'
                }}
              >
                {format.icon} {format.label}
              </button>
            ))}
          </div>
        )}
      </div>
      
      <CircularChart3DComponent ref={chartRef} /* ... */ />
    </div>
  );
}

Summary

You've learned how to:

• ✅ Print charts directly from the browser
• ✅ Export to image formats (PNG, JPEG, SVG)
• ✅ Export to PDF with pdfExport method
• ✅ Inject required modules (CircularChart3DExport, CircularChart3DPdfExport)
• ✅ Customize export filenames and dimensions
• ✅ Set export orientation (Portrait/Landscape)
• ✅ Troubleshoot common export issues
• ✅ Create user-friendly export interfaces

Best Practices:

• Inject appropriate modules for export functionality
• Provide clear export options (PNG for web, PDF for reports)
• Use custom filenames with timestamps
• Set proper dimensions for target use (print, web, social media)
• Show loading states during export
• Handle errors gracefully
• Test exports in different browsers

Title and Subtitle

This guide covers adding and customizing titles and subtitles for 3D Circular Charts, including positioning, styling, and responsive text configuration.

Table of contents

• Overview
• Adding a Title
• Basic Title
• Title for Different Contexts
• Title Customization
• Font and Size
• Color and Alignment
• Complete Title Styling
• Adding a Subtitle
• Basic Subtitle
• Subtitle Customization
• Title and Subtitle Together
• Text Alignment
• Responsive Titles
• Dynamic Titles
• Best Practices
• Complete Example
• Summary

Overview

Titles and subtitles provide context for your charts, helping users understand what data is being displayed. They appear at the top of the chart and can be fully customized.

Adding a Title

Basic Title

Add a title using the title property:

function BasicTitle() {
  const data = [
    { category: 'Product A', sales: 35 },
    { category: 'Product B', sales: 28 },
    { category: 'Product C', sales: 22 },
    { category: 'Product D', sales: 15 }
  ];

  return (
    <CircularChart3DComponent
      id="chart"
      title="Product Sales Distribution"  // Chart title
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="sales"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Result: "Product Sales Distribution" appears centered at the top of the chart.

Title for Different Contexts

// Dashboard widget
<CircularChart3DComponent title="Q4 2024 Revenue" />

// Report chart
<CircularChart3DComponent title="Customer Satisfaction Survey Results" />

// Analytics chart
<CircularChart3DComponent title="Browser Usage Statistics - March 2024" />

Title Customization

Customize title appearance using the titleStyle property.

Font and Size

<CircularChart3DComponent
  title="Sales Analysis"
  titleStyle={{
    size: '18px',
    fontWeight: 'Bold',
    fontFamily: 'Arial'
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

Color and Alignment

function StyledTitle() {
  const data = [
    { region: 'North', revenue: 45 },
    { region: 'South', revenue: 30 },
    { region: 'East', revenue: 25 }
  ];

  return (
    <CircularChart3DComponent
      title="Regional Revenue Distribution"
      titleStyle={{
        size: '20px',
        fontWeight: 'Bold',
        color: '#2196F3',          // Blue title
        fontFamily: 'Segoe UI',
        textAlignment: 'Center',   // Options: Near, Center, Far
        textOverflow: 'Trim'       // Options: None, Trim, Wrap
      }}
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="region"
          yName="revenue"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Complete Title Styling

function CompletelyStyledTitle() {
  const data = [
    { category: 'Electronics', value: 40 },
    { category: 'Clothing', value: 30 },
    { category: 'Home', value: 30 }
  ];

  return (
    <CircularChart3DComponent
      title="Department Sales - FY 2024"
      titleStyle={{
        size: '22px',
        fontWeight: '600',
        color: '#1976D2',
        fontFamily: '"Roboto", sans-serif',
        textAlignment: 'Center',
        fontStyle: 'Normal',        // Options: Normal, Italic, Oblique
        textOverflow: 'Wrap'
      }}
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="value"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Title Style Properties

• `size`: Font size (e.g., '16px', '20px', '1.5em')
• `fontWeight`: 'Normal', 'Bold', '400', '600', '700'
• `color`: Title text color (hex, rgb, or color name)
• `fontFamily`: Font name or font stack
• `textAlignment`: 'Near' (left), 'Center', 'Far' (right)
• `fontStyle`: 'Normal', 'Italic', 'Oblique'
• `textOverflow`: 'None', 'Trim', 'Wrap'

Adding a Subtitle

Basic Subtitle

Add a subtitle using the subTitle property:

function WithSubtitle() {
  const data = [
    { product: 'Laptops', sales: 45 },
    { product: 'Phones', sales: 30 },
    { product: 'Tablets', sales: 25 }
  ];

  return (
    <CircularChart3DComponent
      title="Product Sales"
      subTitle="Q4 2024 Performance Report"  // Subtitle
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="product"
          yName="sales"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Result: Subtitle appears below the title in a slightly smaller, lighter font.

Subtitle Use Cases

// Time period context
<CircularChart3DComponent
  title="Revenue Distribution"
  subTitle="January - March 2024"
/>

// Data source information
<CircularChart3DComponent
  title="Market Share"
  subTitle="Source: Industry Analytics Report"
/>

// Additional context
<CircularChart3DComponent
  title="Customer Feedback"
  subTitle="Based on 1,250 responses"
/>

Subtitle Customization

Style subtitles independently using subTitleStyle.

Basic Subtitle Styling

<CircularChart3DComponent
  title="Sales Overview"
  subTitle="Quarterly Comparison"
  subTitleStyle={{
    size: '14px',
    color: '#757575',
    fontFamily: 'Arial'
  }}
>
  {/* Chart content */}
</CircularChart3DComponent>

Complete Subtitle Styling

function StyledSubtitle() {
  const data = [
    { category: 'Category A', value: 35 },
    { category: 'Category B', value: 30 },
    { category: 'Category C', value: 35 }
  ];

  return (
    <CircularChart3DComponent
      title="Data Distribution"
      subTitle="Updated: March 23, 2024"
      subTitleStyle={{
        size: '13px',
        fontWeight: 'Normal',
        color: '#9E9E9E',
        fontFamily: 'Segoe UI',
        textAlignment: 'Center',
        fontStyle: 'Italic'
      }}
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="value"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Title and Subtitle Together

Balanced Design

function BalancedTitleSubtitle() {
  const data = [
    { quarter: 'Q1', revenue: 45000 },
    { quarter: 'Q2', revenue: 52000 },
    { quarter: 'Q3', revenue: 48000 },
    { quarter: 'Q4', revenue: 55000 }
  ];

  return (
    <CircularChart3DComponent
      title="Quarterly Revenue Performance"
      titleStyle={{
        size: '20px',
        fontWeight: 'Bold',
        color: '#1976D2'
      }}
      subTitle="Fiscal Year 2024 - All Regions"
      subTitleStyle={{
        size: '13px',
        color: '#757575',
        fontStyle: 'Italic'
      }}
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="quarter"
          yName="revenue"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Professional Report Style

function ProfessionalStyle() {
  const data = [
    { segment: 'Enterprise', customers: 450 },
    { segment: 'SMB', customers: 1200 },
    { segment: 'Individual', customers: 3500 }
  ];

  return (
    <CircularChart3DComponent
      title="Customer Segmentation Analysis"
      titleStyle={{
        size: '22px',
        fontWeight: '700',
        color: '#212121',
        fontFamily: '"Helvetica Neue", Arial, sans-serif'
      }}
      subTitle="Total Active Customers: 5,150 | Report Date: March 2024"
      subTitleStyle={{
        size: '12px',
        fontWeight: '400',
        color: '#616161',
        fontFamily: '"Helvetica Neue", Arial, sans-serif'
      }}
      width="700px"
      height="500px"
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="segment"
          yName="customers"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Text Alignment

Control horizontal positioning of titles and subtitles.

Alignment Options

// Left-aligned
<CircularChart3DComponent
  title="Sales Report"
  titleStyle={{ textAlignment: 'Near' }}
  subTitle="Q1 2024"
  subTitleStyle={{ textAlignment: 'Near' }}
/>

// Center-aligned (default)
<CircularChart3DComponent
  title="Sales Report"
  titleStyle={{ textAlignment: 'Center' }}
  subTitle="Q1 2024"
  subTitleStyle={{ textAlignment: 'Center' }}
/>

// Right-aligned
<CircularChart3DComponent
  title="Sales Report"
  titleStyle={{ textAlignment: 'Far' }}
  subTitle="Q1 2024"
  subTitleStyle={{ textAlignment: 'Far' }}
/>

Different Alignments

function MixedAlignment() {
  const data = [
    { type: 'Type A', value: 40 },
    { type: 'Type B', value: 35 },
    { type: 'Type C', value: 25 }
  ];

  return (
    <CircularChart3DComponent
      title="Performance Metrics"
      titleStyle={{
        size: '18px',
        textAlignment: 'Near'  // Left-aligned
      }}
      subTitle="Last updated: 5 minutes ago"
      subTitleStyle={{
        size: '11px',
        textAlignment: 'Far',  // Right-aligned
        color: '#999'
      }}
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="type"
          yName="value"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Responsive Titles

Adaptive Font Sizing

function ResponsiveTitles() {
  const [chartWidth, setChartWidth] = React.useState('100%');
  
  const data = [
    { category: 'A', value: 35 },
    { category: 'B', value: 30 },
    { category: 'C', value: 35 }
  ];

  // Adjust title size based on container
  const titleSize = chartWidth === '100%' ? '20px' : '16px';
  const subtitleSize = chartWidth === '100%' ? '13px' : '11px';

  return (
    <CircularChart3DComponent
      title="Sales Distribution"
      titleStyle={{
        size: titleSize,
        fontWeight: 'Bold'
      }}
      subTitle="Current Period"
      subTitleStyle={{
        size: subtitleSize
      }}
      width={chartWidth}
    >
      <Inject services={[PieSeries3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={data}
          xName="category"
          yName="value"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Dynamic Titles

Updating Titles Based on Data

function DynamicTitles() {
  const [selectedPeriod, setSelectedPeriod] = React.useState('Q1');
  
  const dataByPeriod = {
    Q1: [{ cat: 'A', val: 30 }, { cat: 'B', val: 40 }, { cat: 'C', val: 30 }],
    Q2: [{ cat: 'A', val: 35 }, { cat: 'B', val: 35 }, { cat: 'C', val: 30 }],
  };

  const currentData = dataByPeriod[selectedPeriod];
  const total = currentData.reduce((sum, item) => sum + item.val, 0);

  return (
    <div>
      <select onChange={(e) => setSelectedPeriod(e.target.value)} value={selectedPeriod}>
        <option value="Q1">Q1 2024</option>
        <option value="Q2">Q2 2024</option>
      </select>
      
      <CircularChart3DComponent
        title={`${selectedPeriod} Performance`}
        subTitle={`Total: ${total} units`}
        titleStyle={{ size: '18px', fontWeight: 'Bold' }}
        subTitleStyle={{ size: '13px', color: '#666' }}
      >
        <Inject services={[PieSeries3D]} />
        <CircularChart3DSeriesCollectionDirective>
          <CircularChart3DSeriesDirective
            dataSource={currentData}
            xName="cat"
            yName="val"
          />
        </CircularChart3DSeriesCollectionDirective>
      </CircularChart3DComponent>
    </div>
  );
}

Best Practices

Clear and Concise Titles

// ✅ Good: Clear and specific
<CircularChart3DComponent
  title="Q4 2024 Product Sales"
  subTitle="Electronics Department"
/>

// ❌ Avoid: Too vague
<CircularChart3DComponent
  title="Chart"
  subTitle="Data"
/>

Hierarchical Information

// ✅ Good: Main info in title, details in subtitle
<CircularChart3DComponent
  title="Customer Satisfaction"
  subTitle="Survey conducted: March 2024 | Respondents: 1,247"
/>

// ❌ Avoid: Both too detailed
<CircularChart3DComponent
  title="Customer Satisfaction Survey Results from March 2024"
  subTitle="Based on 1,247 customer responses collected via email"
/>

Consistent Styling

// Create reusable style objects
const titleStyle = {
  size: '20px',
  fontWeight: 'Bold',
  color: '#212121',
  fontFamily: 'Roboto'
};

const subtitleStyle = {
  size: '13px',
  color: '#757575',
  fontFamily: 'Roboto'
};

// Apply consistently across charts
<CircularChart3DComponent
  title="Chart 1"
  titleStyle={titleStyle}
  subTitle="Details"
  subTitleStyle={subtitleStyle}
/>

Complete Example

function CompleteExample() {
  const salesData = [
    { region: 'North America', revenue: 450000, growth: '+15%' },
    { region: 'Europe', revenue: 380000, growth: '+8%' },
    { region: 'Asia Pacific', revenue: 520000, growth: '+22%' },
    { region: 'Latin America', revenue: 180000, growth: '+5%' }
  ];

  const totalRevenue = salesData.reduce((sum, item) => sum + item.revenue, 0);
  const formattedTotal = `$${(totalRevenue / 1000000).toFixed(2)}M`;

  return (
    <CircularChart3DComponent
      title="Global Revenue Distribution"
      titleStyle={{
        size: '24px',
        fontWeight: 'Bold',
        color: '#1976D2',
        fontFamily: '"Segoe UI", Arial, sans-serif',
        textAlignment: 'Center'
      }}
      subTitle={`FY 2024 Total: ${formattedTotal} | Year-over-Year Growth`}
      subTitleStyle={{
        size: '14px',
        fontWeight: 'Normal',
        color: '#616161',
        fontFamily: '"Segoe UI", Arial, sans-serif',
        textAlignment: 'Center',
        fontStyle: 'Italic'
      }}
      width="800px"
      height="600px"
      legendSettings={{ visible: true, position: 'Bottom' }}
    >
      <Inject services={[PieSeries3D, CircularChartLegend3D]} />
      <CircularChart3DSeriesCollectionDirective>
        <CircularChart3DSeriesDirective
          dataSource={salesData}
          xName="region"
          yName="revenue"
        />
      </CircularChart3DSeriesCollectionDirective>
    </CircularChart3DComponent>
  );
}

Summary

You've learned how to:

• ✅ Add titles with the title property
• ✅ Style titles with titleStyle (size, color, font, alignment)
• ✅ Add subtitles with the subTitle property
• ✅ Style subtitles independently with subTitleStyle
• ✅ Combine titles and subtitles effectively
• ✅ Align text (Near, Center, Far)
• ✅ Create responsive and dynamic titles
• ✅ Follow best practices for clear chart labeling

Best Practices:

• Keep titles concise and descriptive
• Use subtitles for context (dates, sources, totals)
• Maintain visual hierarchy (bold title, lighter subtitle)
• Align titles consistently across charts
• Update titles dynamically when data changes
• Consider responsive font sizes for different screen sizes