Charts - Nested Pie Examples

#Usage

import { ChartAnnotation, ChartPie, ChartStacked, ChartSvg, ChartTooltip } from '@primeui/vue-chart';

<ChartSvg>
    <ChartStacked>
        <ChartPie :data="regions" category-field="region" value-field="total" :inner-radius="0.34" />
        <ChartPie :data="segments" category-field="segment" value-field="value" :inner-radius="0.62" />
    </ChartStacked>
    <ChartAnnotation :render="renderCenter" />
    <ChartTooltip />
</ChartSvg>

Use nested pies only when the rings describe a real hierarchy. If the rings are unrelated series, use grouped or stacked charts instead.

#Global EV Sales by Market and Powertrain, 2016 to 2023

ChartStacked wraps two ChartPie rings: the inner uses innerRadius=0.4 with renderContent printing market abbreviations inside each slice, the outer splits each market by powertrain type. Press any year button to animate both rings; ChartAnnotation updates the center with the global total and a YoY growth badge. Hover the inner ring to see market breakdown, the outer to see powertrain share.

#World GDP by region and income group 2023

ChartStacked layers two ChartPie rings: regions on the inner and income groups on the outer. The color array uses shade pairs, darker for high income and lighter for low, so the economic hierarchy is readable without a legend.

#Related Docs

• Pie Examples
• Nightingale