Chart Pie
Pie and donut charts built on unovis-vue. One ChartPie renders a full pie, a donut, a donut with a centre total, or nested rings.
Pie
A full pie (arc-width 0). Each row maps to a config entry for its color.
Donut
Set arc-width to leave a hole in the centre.
Donut with text
Show a total (or any label) in the centre.
Stacked
Concentric rings via the layers prop.
Center total
Per-segment gradients, rounded segments, a drop shadow, and a center total.
Center stats
A center percentage with a legend below.
Pattern segments
Mix solid and SVG-pattern segments in a single pie.
Active segment
Expand one segment outward with activeIndex.
API Reference
Props, events, and slots for each sub-component.
ChartPie
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | Record<string, any>[] | [] | Segment rows. |
| config | ChartConfig | — | Map of segment name → { label, color }, plus a value-key meta entry for the tooltip label. |
| valueKey | string | "value" | Row key for the segment value. |
| nameKey | string | "name" | Row key matched against config for the color. |
| arcWidth | number | 0 | 0 = full pie; a positive value = donut ring width. |
| centerLabel | string | null | Explicit centre label. |
| centerSubLabel | string | null | Centre sub-label; auto-sums the value when no centerLabel/total is given. |
| total | number | string | null | Centre total override. |
| layers | { data, valueKey, arcWidth, radius }[] | null | Concentric rings for a nested/stacked pie. |
| legend | boolean | false | Render a legend below the chart. |
| radius | number | null | Explicit outer radius in px. |
| cornerRadius | number | 0 | Rounded segment ends. |
| padAngle | number | 0 | Gap between segments, in radians. |
| svgDefs | string | null | Raw SVG <defs> string (gradients/patterns/filters). |
| segmentFill | (d) => string | null | Per-segment fill accessor; defaults to the row's fill then config color. |
| segmentStrokeColor | string | null | Stroke drawn in the gap between segments (e.g. var(--background)). |
| segmentStrokeWidth | number | 4 | Segment gap stroke width. |
| donutFilter | string | null | SVG filter url applied to the donut group (e.g. a drop shadow). |
| activeIndex | number | null | Index of the segment rendered expanded. |
| activeOuterRadius | number | 110 | Outer radius of the expanded active segment. |