Example of Nested Donut in Javascript Chart

/
/
Nested Donut

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.

More Details...

Description

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. Injecting Module The Accumulation Chart component is modular. To render pie series, inject the PieSeries module using the AccumulationChart.Inject(PieSeries) method. For more details about rendering multiple pie series, refer to the documentation section .