Pie Chart
Parts of a whole, in ten layouts including labelled, interactive, and donut treatments.
Pie or donut?
This component covers both: the donut* variants are the same data with a hole. Reach for the dedicated Donut Chart when the center figure is the point; use this one when you want a plain pie or one of the labelled layouts.
Solid pies
No variant puts an angular gap between slices: Figma's always touch. pie's separator is a thin stroke drawn on top of the shared edge, not a padding angle, which is why pie-no-separator is a separate variant rather than a spacing prop.
piestroke between slicespie-no-separatorslices touch directlyLabels
label and custom-label put the value outside the pie on a leader line, the second in a filled pill. label-list is the one that writes the category name inside each slice, so it needs slices big enough to hold the text.
labeloutside leader-line valuescustom-labelleader-line values in a pilllabel-listcategory names inside slicesDonut treatments
donut-active pushes one slice outward and interactive brackets one with a halo ring. Neither is something Recharts' own activeShape can do by itself (Recharts 3 dropped activeIndex from Pie), so both are custom shape renderers driven by the component's own default-active state.
donutplain ringdonut-activeone slice explodedstackedtwo concentric ringsinteractivehalo ring bracketing a sliceDonut with a total
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number }[] | One slice per entry. | |
| variant | 'pie' | 'pie-no-separator' | 'label' | 'custom-label' | 'label-list' | 'donut' | 'donut-active' | 'donut-with-text' | 'stacked' | 'interactive' | 'pie' | Covers every layout in the Figma set, including the donut treatments. |
| centerValue | string | Center figure, for the donut variants. | |
| centerCaption | string | Caption under the center value. | |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Preset diameter. |