Charts
PieChart
Parts of one whole.
When to reach for it
Roughly what share, and nothing more precise. Ranking or comparing wedges — especially across two pies — is a BarChart’s job.
Examples
default
| browser | Value |
|---|---|
| chrome | 275 |
| safari | 200 |
| firefox | 187 |
| edge | 173 |
| other | 90 |
shape
| browser | Value |
|---|---|
| chrome | 275 |
| safari | 200 |
| firefox | 187 |
| edge | 173 |
labels and emphasis
| browser | Value |
|---|---|
| chrome | 275 |
| safari | 200 |
| firefox | 187 |
| edge | 173 |
| browser | Value |
|---|---|
| chrome | 275 |
| safari | 200 |
| firefox | 187 |
| edge | 173 |
loading
Notes
Parts of one whole.
Worth saying plainly: a pie answers "roughly what share" and nothing more precise. Comparing two adjacent wedges by eye is unreliable past about five of them, and comparing a wedge across two pies is worse. When the reader needs to rank or compare, a <BarChart> answers the same question better.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | The composed parts — axes, grid, tooltip, legend, and the marks themselves. | |
| configrequired | ChartConfig | Sector names → their label and paint. Keys must match the `nameKey` values. | |
| datarequired | TData[] | The rows the chart draws. One entry per point, bar or category. | |
| dataKeyrequired | keyof TData & string | The row field holding each sector's number. | |
| nameKeyrequired | keyof TData & string | The row field holding each sector's name. | |
| titlerequired | string | What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed. | |
| chartProps | ComponentProps<typeof RechartsPieChart> | Escape hatch onto the raw Recharts chart element. | |
| className | string | Merged onto the figure, last, so a call site can size or space it. | |
| defaultSelectedSector | string | null | null | The sector lit on first render. |
| description | ReactNode | A line under the title — the unit, the window, the caveat. | |
| hideDataTable | boolean | false | Drops the hidden table view. Only correct when the page prints the data itself. |
| isLoading | boolean | false | Swaps the marks for an animated skeleton, keeping the measured height so the page does not jump when the data lands. |
| onSelectionChange | (selection: { name: string; value: number } | null) => void | Fires when the selection changes, and with null when it is cleared. | |
| showTitle | boolean | Prints the title above the plot instead of hiding it from sight. |
Types
export type PieVariant = 'gradient'Accessibility
- title is required; the rows are also rendered as a visually hidden table.
- The legend sits under the pie by default, because a pie has no category axis naming its sectors.
- Compose a Label to print the numbers on the wedges: a pie’s weakness is that an angle is hard to read, and a printed number removes the guess.
- One fill variant, deliberately. A wedge is small and awkwardly shaped, and a texture inside one reads as noise.