Try Our Live Demo

Choose the right Pie chart style for your data

Syncfusion Charts provides multiple ways to visualize proportional data using Pie charts. Choose a classic Pie chart for part-to-whole comparisons, a Donut chart to display additional information in the center, or a Pie chart with various radius to place greater visual emphasis on value differences between categories.

Show proportions with a Pie Chart

Display each category as a proportional slice of a circle. Pie charts help users quickly understand how individual categories contribute to the whole.

Visualize proportions with a Donut Chart

Display proportional values using a ring-shaped layout. Donut charts provide space at the center for totals, KPIs, or other contextual information while preserving part-to-whole comparisons.

Variable Radius Pie

Highlight magnitude differences between categories by varying the visual prominence of each slice while still preserving proportional relationships.

Pie Chart

Render proportional data as wedges of a circle. Pie charts display each category as a slice whose angle and area represent its share of the total, supporting comparison of relative weights across categories.

Display each category as a proportional wedge of a circle.
Compare relative weights across categories at a glance.
Show part-to-whole relationships using a familiar circular layout.
Configure color, border, and slice spacing through chart properties.

Pie Chart showing each category as a proportional wedge.

Pie chart configured with innerRadius to show proportional ring segments around a hollow center.

Donut Chart

Render proportional data as ring-shaped segments around a hollow center. Use them when additional space is required for totals, KPIs, or contextual information, since the center area supports custom content.

Display proportional values using a ring-shaped layout.
Reserve the center area for totals, KPIs, or custom content.
Improve readability while maintaining part-to-whole comparisons.
Customize the center area with totals, KPIs, or custom HTML.

Pie Chart with Various Radius

Render proportional data using slices with different outer lengths to emphasize value differences. Use them when magnitude differences require visual emphasis, since larger slices stand out while proportional relationships are preserved.

Emphasize magnitude differences between categories.
Highlight dominant values more effectively than a standard Pie chart.
Combine proportional comparison with additional visual emphasis.
Combine with data labels to highlight dominant values on each slice.

Pie chart configured with the radius property to show wedges with varying outer radii.

GUIDED PIE CHART WORKFLOW

Build a Pie chart in four steps

Developers can bind data to a Pie chart, choose a style, render the chart, and verify that the proportional visualization displays the expected categories and values.

Choose a Pie chart style

Decide between the default style, a donut appearance using innerRadius, or a variable radius style using the radius property.

Bind the data

Provide categories and values in a data source compatible with Syncfusion Charts.

Render the chart

Render the Pie chart with the chosen style to display standard wedges, donut rings, or variable-radius wedges.

Verify the visualization

Confirm that categories, values, and visual layout display the expected proportionality.

PLATFORM SUPPORT

Render Pie charts across platforms

The Pie chart is available across web, desktop, and cross-platform frameworks. Availability of the innerRadius and radius property configurations may vary by platform.

Capability	JS, React, Angular, Vue	Blazor	ASP.NET Core & MVC	WPF & WinForms	.NET MAUI	Flutter
Pie Chart
Donut style (innerRadius property)
Variable radius style (radius property)
Category-based data binding

supported partially supported not supported

Frequently Asked Questions

✅ What chart type powers pie and donut visuals in Syncfusion Charts?

It depends on the platform. In the JavaScript-based Charts (JS, React, Angular, Vue, Blazor, and ASP.NET Core & MVC), pie, donut, and variable-radius visuals all render from a single Pie chart type, with the appearance controlled through configuration properties. In WPF, WinForms, .NET MAUI, and Flutter, Donut is a separate DoughnutSeries type rather than a property on the Pie series, though its API closely mirrors the Pie series.

✅ Are Donut charts and Pie charts with varying radius separate chart types?

On the JavaScript-based Charts (JS, React, Angular, Vue, Blazor, ASP.NET Core & MVC), no — both are configurations of the same Pie chart type. Set the innerRadius property for a donut appearance, or the radius property to vary each slice’s size based on its value, without switching chart types. On WPF, WinForms, .NET MAUI, and Flutter, donut appearance uses a separate DoughnutSeries type, while variable-radius slices are still configured through a radius property on the Pie series.

✅ Is the Pie chart available across multiple platforms?

Yes. Syncfusion provides Pie chart support across multiple web, desktop, and cross-platform frameworks. Refer to the platform support table for framework-specific availability of the innerRadius and radius property configurations.

✅ When should I use a donut style instead of a standard pie?

Use the default Pie chart style for a familiar circular representation. Set the innerRadius property to switch to a donut style when the center area is needed for a total, label, or other supporting information.

✅ What types of applications commonly use Pie charts?

Teams commonly use Pie charts in business dashboards, reporting applications, executive summaries, and analytics solutions to visualize proportions and category shares.

✅ Can Pie charts be used in dashboards and reports?

Yes. Pie charts, including donut and variable-radius styles, can be used in dashboards and reports to present proportions and category contributions in a visually distinctive format.

Resources