Charts - Donut Examples

Donut chart demos on real data. Covers animated slice reordering, live annotation content, and custom center readouts.

#Usage

import { ChartAnnotation, ChartLegend, ChartPie, ChartSvg, ChartTooltip } from '@primeui/vue-chart';
<ChartSvg>
    <ChartPie :data="data" category-field="sector" value-field="weight" :inner-radius="0.58" />
    <ChartAnnotation :render="renderCenter" />
    <ChartLegend />
    <ChartTooltip />
</ChartSvg>

Use donut charts when the center readout is part of the story: total, current selection, status, or a short KPI. Keep the hole useful rather than decorative.

#Browser Market Share

Press Play or drag the year slider; sort="value-desc" continuously reorders slices so rank changes animate alongside values. The tooltip shows each browser's share against a fixed baseline, and the legend updates live with each year's figures.

Loading Demo...

#S&P 500 Sector Breakdown

ChartAnnotation renders a live sector-count and top-weight summary inside the donut hole. The right-side legend doubles as a performance table, showing each sector's index weight alongside its YTD return in green or red. Hover to see the tooltip reinforce both figures.

Loading Demo...

#Renewable Energy by Region

A sequential green color ramp encodes share magnitude so the largest consumers stand out visually. ChartAnnotation keeps the global average anchored inside the hole as the buttons switch between years. Hover to see the tooltip report each region's deviation from that average.

Loading Demo...