Implements the Syncfusion React 3D Circular Chart component for pie and donut chart visualization. Use this when users need 3D circular charts, data labels, legends, tooltips, or empty point handling. Guides through installation, configuration, customization, and troubleshooting of 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](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](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](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](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](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](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](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](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](references/api reference.md) Summary of component properties, methods, and events based on the official Syncfusion API docs for CircularChart3DComponent . Quick Start Example Common Patterns Creating a Donut Chart Adding Data Labels Enabling Legend and Tooltip Handling Empty Points 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](references/getting started.md) for installation and basic setup, then explore specific features as needed.

syncfusion-react-3d-circular-chart