• Material 3
  • Bootstrap 5
  • Fluent 2
  • Tailwind CSS
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Nested Donut Chart in ASP.NET Core Chart Control

This nested donut chart example demonstrates how to visualize the population of Qatar by nationality using multiple pie series. The outer ring represents individual countries, while the inner ring shows regional distribution with consistent color grouping.

DEMO
SOURCE

In this example, multiple pie series are used to display hierarchical data in concentric rings. This approach makes it easy to compare nationality-level population distribution alongside broader regional groupings within Qatar.

The radius and innerRadius properties control the size and thickness of each ring, enabling the nested donut appearance. The pointColorMapping property ensures that countries and their corresponding regions share the same color for visual consistency.

The Tooltip feature is enabled to provide additional information. Hover over a segment (or tap on touch devices) to view the nationality and its population share percentage.

For more details about rendering multiple pie series, refer to the documentation section .

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab