PieChart

Pie / donut chart with token-colored slices (up to 8 series), a hover-dim highlight, an optional donut center label, and an optional legend. Tooltips reuse ChartTooltipContent for visual parity with ChartFrame.

Import

PieChart is a registry composite — you own the source after installing:

npx ploxum add pie-chart

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

Requires recharts and depends on the chart-frame registry item (for ChartTooltipContent) plus @roger-emerson/ploxum-primitives (Card).

Usage

const severity = [
  { label: "Critical", value: 3 },
  { label: "High", value: 7 },
  { label: "Medium", value: 12 },
  { label: "Low", value: 9 },
];
 
<PieChart
  centerLabel={<strong>31</strong>}
  data={severity}
  innerRadius={56}
  showLegend
  subtitle="Open · last 24h"
  title="Incidents by severity"
  valueFormatter={(v) => `${v} open`}
/>;

innerRadius={0} (the default) renders a solid pie; any positive value makes a donut and reveals centerLabel in the hole.

Props

Prop	Type	Default	Description
`title`	`string`	—	Card header title.
`data`	`PieDatum[]`	—	`{ label, value, color? }[]`. Slice color defaults to a chart-series token by index.
`innerRadius`	`number`	`0`	Donut hole radius in px; `0` = solid pie.
`outerRadius`	`number`	`88`	Outer radius in px.
`centerLabel`	`ReactNode`	—	Shown in the donut hole (donut only).
`showLegend`	`boolean`	`false`	Token-colored legend row beneath the chart.
`valueFormatter`	`(n: number) => string`	—	Format slice values in the tooltip.
`accent`	`"none" \| "amber"`	`"none"`	Card left-border accent.
`height`	`number`	`240`	Chart body height in px.
`subtitle` / `className` / `ref`	—	—	Passed through to Card.

Design rules

Slice colors come from --ploxum-color-chart-series1..8 — that's the hard cap. Don't exceed 8 categories in one pie; bucket the long tail into "Other".
Prefer a donut with a center total over a solid pie when the aggregate matters as much as the split.
Hover dims the other slices rather than exploding one out — keep it flat.

Storybook

Composites/PieChart ↗