Example of Nested Donut in ASP.NET MVC 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 Radiusopens in a new tab and InnerRadiusopens in a new tab properties control the size and thickness of each ring, enabling the nested donut appearance. The PointColorMappingopens in a new tab property ensures that countries and their corresponding regions share the same color for visual consistency.

The Tooltipopens in a new tab 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.

More information about rendering multiple pie series can be found in this documentationopens in a new tab section.

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