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.

Set arc-width to leave a hole in the centre.

Show a total (or any label) in the centre.

Concentric rings via the layers prop.

Per-segment gradients, rounded segments, a drop shadow, and a center total.

A center percentage with a legend below.

Mix solid and SVG-pattern segments in a single pie.

Expand one segment outward with activeIndex.

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.