syncfusion-aspnetcore-circular-chart-3d

Syncfusion ASP.NET Core 3D Circular Chart

Syncfusion's 3D Circular Chart provides a powerful component for visualizing proportional data using 3D Circular Chart formats. This skill guides you through implementing, configuring, and customizing pie/donut charts in ASP.NET Core applications, from basic setup to advanced interactive features.

When to Use This Skill

Use this skill when you need to:

• Create a pie or donut chart to display proportional data
• Configure and format data labels, legends, and tooltips
• Customize chart appearance with titles, colors, and styling
• Handle empty or missing data points
• Enable interactive features like print and export
• Implement user interactions with pie chart slices
• Configure chart behavior in ASP.NET Core applications

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and NuGet package setup
• Adding tag helpers and script references
• Creating your first pie chart
• Basic ASP.NET Core configuration
• Project structure setup

Pie and Donut Variations

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

• Rendering pie series vs donut series
• Radius customization and configuration
• Inner radius for donut effect
• Multiple series rendering
• Color mapping and styling

Data Labels

📄 Read: references/data-labels.md

• Enabling and positioning data labels
• Label templates and custom formatting
• Connector lines and styling
• Text mapping from data source
• Percentage and value formatting
• Label customization with events

Legend and Tooltips

📄 Read: references/legend-tooltips.md

• Legend configuration and positioning
• Legend alignment, sizing, and shapes
• Legend paging and navigation
• Tooltip enabling and formatting
• Custom tooltip templates
• Interactive tooltip behavior
• Styling and appearance

Titles, Subtitles, and Empty Points

📄 Read: references/titles-empty-points.md

• Adding titles and subtitles
• Title customization and styling
• Handling empty/null data points
• Empty point modes (Gap, Average, Drop, Zero)
• Customizing empty point appearance
• Subtitle styling and positioning

Print and Export

📄 Read: references/print-export.md

• Printing pie/donut charts
• Enabling export with enableExport="true"
• Exporting to image formats (JPEG, PNG, SVG)
• PDF export functionality
• Export configuration options
• Button integration for user interactions

Quick Start

Here's a minimal working example to get started with a pie chart:

// CSHTML View
<ejs-circularchart3d id="chartContainer" title="Sales Distribution" tilt="-45">
    <e-circularchart3d-legendsettings visible="true" position="@Syncfusion.EJ2.Charts.LegendPosition.Right">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="@chartData" xName="Category" yName="Value">
            <e-circularchart3d-series-datalabel visible="true" position="@Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside">
                <e-connectorstyle length="40px"></e-connectorstyle>
            </e-circularchart3d-series-datalabel>
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>

// Code-behind
public class ChartData
{
    public string Category { get; set; }
    public double Value { get; set; }
}

// Controller
List<ChartData> chartData = new()
{
    new ChartData { Category = "Product A", Value = 35 },
    new ChartData { Category = "Product B", Value = 28 },
    new ChartData { Category = "Product C", Value = 37 }
};

Common Patterns

Pattern 1: Pie Chart with Formatted Data Labels

<e-circularchart3d-series-datalabel visible="true" format="n1" position="@Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside">
    <e-font size="12px" fontWeight="600"></e-font>
    <e-connectorstyle length="50px" color="gray"></e-connectorstyle>
</e-circularchart3d-series-datalabel>

Pattern 2: Donut Chart Configuration

<e-circularchart3d-series dataSource="@data" xName="X" yName="Y" innerRadius="50%">
</e-circularchart3d-series>

Pattern 3: Legend with Customized Appearance

<e-circularchart3d-legendsettings visible="true" position="@Syncfusion.EJ2.Charts.LegendPosition.Bottom" 
    alignment="@Syncfusion.EJ2.Charts.Alignment.Center" width="100%">
</e-circularchart3d-legendsettings>

Pattern 4: Tooltip with Custom Format

<e-circularchart3d-tooltipsettings enable="true" format="${point.x}: ${point.y}%"></e-circularchart3d-tooltipsettings>

Key Configuration Properties

Property	Purpose	Default
Type	Series type (Pie for pie, Donut via InnerRadius)	Pie
Radius	Pie radius percentage	80%
InnerRadius	Inner radius for donut effect (0-100%)	0%
DataLabel.Visible	Show/hide data labels	false
DataLabel.Position	Label position (Inside/Outside)	Inside
LegendSettings.Visible	Show/hide legend	true
Tooltip.Enable	Enable tooltip on hover	false
EmptyPointSettings.Mode	Handle null values (Gap/Average/Drop/Zero)	Gap

Common Use Cases

1. Market Share Visualization: Display product or market segment distribution using pie/donut charts
2. Budget Breakdown: Show expense categories as pie slices with percentages
3. Survey Results: Visualize survey response distribution proportionally
4. Status Distribution: Display project status distribution (Completed, In Progress, Pending, etc.)
5. Sales Performance: Compare sales by region or product category
6. Inventory Levels: Show inventory distribution across warehouses or categories
7. Dashboard Analytics: Include pie/donut charts in business analytics dashboards

Next Steps

• Read the Getting Started guide to set up your first chart
• Explore Pie and Donut Variations for different visual styles
• Configure Data Labels for better data representation
• Add Legends and Tooltips for interactive data exploration
• Handle Titles and Empty Points for completeness
• Enable Print and Export for report generation