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
📄 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
Common Patterns
Creating a Donut Chart
Adding Data Labels
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 for installation and basic setup, then explore specific features as needed.