Charts - Pie & Donut

#Usage

import { ChartAnnotation, ChartCanvas, ChartCaption, ChartDataLabels, ChartExportMenu, ChartHover, ChartItem, ChartLegend, ChartPie, ChartStacked, ChartSvg, ChartTitle, ChartTooltip } from '@primeui/vue-chart';

<ChartSvg>
    <ChartPie :data="data" value-field="valueField" category-field="categoryField" />
</ChartSvg>

Pie and donut charts show proportions of a whole, suited for part-to-whole comparisons with a small number of categories. Data binds to ChartPie; no axes are needed. Set innerRadius to switch from pie to donut.

#Basic

Map data fields with valueField and categoryField. The chart calculates each slice angle from the acquisition-channel share.

#Donut

Set innerRadius to cut a hole in the center. The value is a ratio of the outer radius. 0.6 creates a readable account-mix ring, while 0.8 produces a thin ring.

#Gauge

Reduce sweepAngle below 360 to create a gauge arc. Combine with startAngle to set the opening direction. Pair with innerRadius and a muted remainder slice for a compact SLO or error-budget readout.

#Colors

Pass an array to color to define a custom palette. Slices cycle through colors by index, which is useful for stable acquisition channels or product segments. For per-slice control, pass a function that receives each data item and returns a color string.

#Gradient Color

Pass a radial gradient object to color instead of a flat hex value. Each gradient defines stops with offset and color pairs; keep the palette controlled so the effect reads as depth, not decoration.

#Sorted

Set sort to reorder slices before rendering. Use value-desc to place the largest incident cause first, or label-asc for alphabetical order. Sort does not affect the underlying data, only the visual arrangement.

#Outer Radius

Set outerRadius to control how much of the chart area the pie fills. The default 1 fills the available space. A smaller radius leaves room for external labels and leader lines.

#Variable Radius

Set sliceRadiusValue to a numeric data field to vary each slice's outer radius independently. Use equal angle weights when the categories are cyclical, then let radius carry the magnitude. That shape is known as a Nightingale or rose chart.

#Border

Set borderStrokeWidth and borderColor to add a stroke around each slice. Add borderRadius for rounded corners, spacing to introduce gaps between slices, and borderDash for a dashed stroke.

#Custom Slice Content

Use renderContent to draw custom content inside each slice. The callback receives the slice's value, percentage, label, index, and color. In SVG mode return a VNode centered at the origin. In Canvas mode draw to ctx directly and return null.

#Stacked

Wrap multiple ChartPie components inside ChartStacked to create concentric rings. Use the inner ring for the parent categories and the outer ring for the child split. Set gap on ChartStacked to add spacing between rings.

#Declarative

Define slices inline using ChartItem children instead of a data array. Each ChartItem accepts value, category, color, borderRadius, borderColor, and borderStrokeWidth.

#Title & Caption

Add ChartTitle to display a title above the chart and ChartCaption for a descriptive line beneath it. Adding both reduces the available chart area.

For full configuration see Title & Caption.

#Hover

Add ChartHover to pop the hovered slice outward along its angle. The chart reserves padding so it doesn't clip. Use brightness to lighten the slice and set dimOpacity below 1 only when you want the rest to fade.

For full configuration see Hover.

#Tooltip

Add ChartTooltip to show slice details on hover. The tooltip includes the percentage alongside the value with no extra configuration. Use the render prop for custom tooltip content.

For full configuration see Tooltip.

#Legend

Add ChartLegend to display an interactive legend. For pie charts, each slice gets its own legend entry. Click any item to toggle the corresponding slice. Set position to top, bottom, left, or right.

For full configuration see Legend.

#Data Labels

Add ChartDataLabels to display labels outside the slices with leader lines. Set display to value, percentage, or both. Use minPercentage to hide labels on very small slices and lineStyle to switch between angled and straight connectors.

For full configuration see Data Labels.

#Annotation

Use ChartAnnotation with the render callback to place custom content in the center of a donut. The callback receives chartArea, center, xScale, yScale, textColor, fontFamily, and ctx (Canvas mode only). Use center to position content at the chart's center. xScale and yScale are null for pie charts. In SVG mode return a VNode. In Canvas mode draw to ctx and return null.

For full configuration see Annotation.

#Animation

Pass the chart-root animation prop (<ChartSvg> / <ChartCanvas>) to control entrance and update transitions. Slices expand from zero span on entrance. On data updates, slices interpolate their rotation and angle. Slice additions and removals animate independently.

For full configuration see Animation.

#Export

Add ChartExportMenu to let users download the chart as PNG, SVG, or PDF.

See Export for format options and programmatic export.

#Responsive

See Responsive for container sizing, aspect ratio, and breakpoint configuration.

#Accessibility

See Accessibility for ARIA labels, keyboard navigation, and screen reader support.

#API

#ChartPie

Visual styling props with type accessor → R accept a static value, a per-slice array, a field name (keyof T), or a callback (ctx: ItemContext<T>) => R | undefined. Color-family arrays cycle modulo length; other accessor arrays clip and fall back to the series default.

#ItemContext

Passed to every accessor → R callback. Return undefined to fall back to the series-level default for that item.

#ChartStacked

Wrap multiple ChartPie components inside ChartStacked to create concentric rings. Each ChartPie child becomes one ring.

#ChartItem

Use ChartItem as children of ChartPie instead of a data array for inline slice definitions.

#SliceRenderContext

#Related Docs

• Pie Examples
• Nightingale
• Nested Pie
• Donut Examples
• Gauge Examples
• Legend
• Tooltip
• Hover
• Data Labels
• Annotation
• Animation