Charts - Pie Examples

#Usage

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

<ChartSvg>
    <ChartPie :data="data" category-field="provider" value-field="share" />
    <ChartLegend />
    <ChartTooltip />
    <ChartDataLabels />
</ChartSvg>

Use pie charts for small part-to-whole sets where every slice has a clear label. Move to donut, stacked rings, or another chart type when the hierarchy or comparison needs more space.

#IaaS Cloud Market Share

ChartDataLabels places angled leader lines outside each slice so share figures stay readable without overlapping the pie. The color array assigns each provider's brand color, and a custom legend shows estimated revenue alongside each share. Hover to see the tooltip display both figures.

#Browser Market Share

renderContent draws percentage and label directly inside each slice, adapting the format to the available space. The ranked legend shows each browser's exact share, doubling as a quick-reference leaderboard.

#Global Energy Mix

The color array maps each energy category to a semantic hue: fossil fuels in warm risk tones, renewables in green, nuclear in periwinkle. ChartAnnotation pins a combined-share figure directly inside the chart so the key insight is visible without hovering.

#Related Docs

• Pie & Donut Overview
• Nightingale
• Nested Pie