Pie Chart

A pie/donut chart component built using Recharts v3. Supports donut variant with center labels, slice labels, and customizable styling.

Installation

$ npx shadcn@latest add @orecus/pie-chart

Registry:

@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card

Distribution of visitors by browser

Using colorStyle='default' and glow={false}

Prop	Type	Default	Description
`data`*	`{ name: string; value: number }[]`	—	The data for the chart - each item becomes a slice
`colors`	`ThemeColor[]`	—	Colors for each slice
`variant`	`'pie' \| 'donut'`	`'pie'`	Chart style
`innerRadius`	`number \| string`	`60`	Inner radius for donut variant
`outerRadius`	`number \| string`	`80`	Outer radius
`showLabels`	`boolean`	`false`	Show value labels on slices
`showDataLabels`	`boolean`	`false`	Show value labels on slices (alias for showLabels for cross-chart consistency)
`labelType`	`'value' \| 'percent' \| 'name'`	`'value'`	Label content type
`paddingAngle`	`number`	`0`	Gap between slices in degrees
`centerLabel`	`{ value: string \| number; label?: string }`	—	Center label for donut charts
`showLegend`	`boolean`	`true`	Show chart legend
`cardProps`	`CardProps`	—	Props to pass to the underlying Card component
`tooltipSortByValue`	`boolean`	`false`	Sort tooltip items by value (descending)
`legendIndicator`	`'square' \| 'circle' \| 'line'`	`'square'`	Shape of legend indicators
`legendShowValues`	`boolean`	`false`	Show values in legend
`legendWrap`	`boolean`	`true`	Allow legend items to wrap to multiple lines