Pie Chart

Charts

Shows proportions of a whole.

Pie charts communicate part-to-whole relationships at a glance. Each slice maps to a { name, value, color } row, and colors fall back to the chart palette when omitted.

npx shadcn@latest add pie-chart

Default

Traffic sources by share.

Preview

Live

tsx

1<PieChart data={trafficSources} height={240} />

With labels

Percentage labels rendered inside each slice.

Preview

Live

tsx

1<PieChart data={trafficSources} height={260} showLabels />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
data	{ name, value, color? }[]	The slices to render.
height	number= 260	The chart height in pixels.
innerRadius	number \| string= 0	The inner radius, used to create a donut.
outerRadius	number \| string= "80%"	The outer radius of the pie.
showLabels	boolean= false	Renders a percentage label inside each slice.