Pie chart

A React component in Beamline's Charts & data-vis category.

A few shares of a whole as a pie or donut, with spaced slices, percent labels, a centre readout and a list of every slice with value and share; hovering or focusing a row lifts its slice, clicking pins it.

Use it for

Two to six shares that add up to a whole (revenue by plan, traffic by channel).
A headline total with its breakdown (donut with centre readout).

Not for

Many categories or close values (bar-chart or bar-list).
Change over time (area-chart with Share stacking).
Unit counts (waffle-chart).

Anatomy

title
plot (slices, centre readout in a donut)
slice list (swatch, name, value, share; buttons)
table button

Variants

0: donut
1: gap (spaced, rounded slices)
2: labels (percent on slices)
3: list beside or below

States

loading (skeleton)
empty (no data)
missing values (listed as Not measured, never drawn as 0)
active (hover or focus previews)
selected (click or Enter pins)
table view

Keyboard

Tab moves through the slice list; focus previews the slice and the centre reads it
Enter or Space pins the slice (aria-pressed); Escape clears
The table button switches to a table of every slice

Motion

Slices sweep in once (500 ms); the active slice lifts 4 px and the others dim in 150 ms; the centre number rolls. Nothing moves under reduced motion.

Props

Prop	Type	Default	Description
`data / label / value`	`T[] / keyof T / keyof T`	—	Rows, the column naming each slice, the column with its amount.
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name is always its accessible name.
`format`	`(v: number) => string`	—
`table`	`boolean`	—	Offer the table view (default on).
`loading`	`boolean`	—
`actions`	`ReactNode`	—
`className`	`string`	—
`donut`	`boolean`	—
`gap`	`boolean`	—
`labels`	`boolean`	—	Percent on slices large enough to hold it.
`centerLabel`	`string`	—	What the donut centre calls the total (default Total).
`colors`	`string[]`	—
`size`	`number`	—	Diameter in px (default 200).
`list`	`boolean`	—	Show the slice list (default on).
`active / defaultActive / onActiveChange`	`string \| null`	—	The selected item; hover and focus preview others.
`classNames`	`ChartClassNames`	—	Frame, tooltip and slice-list parts as applicable to this chart.
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—	The native chart figure; layout measurement refs stay internal.

Dependencies

motion

Import

import { PieChart } from "@/components/pie-chart/pie-chart";

Get it

Pie chart is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent