PieChart

Open in Playground

data: [{ label, value, color? }]. Add donut (and optionally center) for a ring. Hover a slice for its label, value and share in a tooltip that follows the mouse.

Kevin
Stuart
Bob
Others

Eaten
Left

When the data changes the slices swing to their new size; the tooltip and legend always show the real values.

Kevin
Stuart
Bob

Props

data{ label, value, color? }[]
Slices.
donutboolean
Default: false
Render a ring.
centerReactNode
Text in the donut hole.
labelstring
Default: 'Pie chart'
Accessible name.
animateboolean
Default: true
Animate the chart in when it appears and glide it to new values when the data changes (skipped for users who prefer reduced motion).
classNamestring
Default: ''
Extra classes for the root element.

PieChart props
Prop	Type	Default	Description
`data`	{ label, value, color? }[]	–	Slices.
`donut`	boolean	`false`	Render a ring.
`center`	ReactNode	–	Text in the donut hole.
`label`	string	`'Pie chart'`	Accessible name.
`animate`	boolean	`true`	Animate the chart in when it appears and glide it to new values when the data changes (skipped for users who prefer reduced motion).
`className`	string	`''`	Extra classes for the root element.