Pie Chart

A pie or donut chart for the parts of a whole, with an optional total in the middle.

When to use

Use when: The parts of a whole, for up to six slices, with a total in the middle of a donut.
Avoid when: More than six slices, or slices that are close in size; use a Bar Chart.

Installation

bunx shelf add chart-pie

The source lands in src/components/ui/chart-pie.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Chart from "@/components/ui/chart-pie";

<PieChart aria-label="Orders by channel">
  <Chart.Tooltip />
  <Chart.Legend />
  <Pie data={data} dataKey="orders" nameKey="channel" donut centerValue="1,284" centerLabel="Orders" />
</PieChart>

Built on

Packages: @stylexjs/stylex, recharts
Shelf items: Chart, foundations
Figma: In progress. See Designers and Figma.