PieChart
Pie chart showing what a total is made of, with a legend that carries values and percentages on hover.
Component behavior
PieChart displays category proportions as filled slices. Set innerRadius to render a ring with an open center.
- A total divided into a small number of categories.
- Category proportions at one point in time.
- Reports requiring a pie-chart presentation.
DonutChart: a summary value must appear in the ring center.
BarChart: categories require ranking or precise comparison.
TreeMap: categories form a hierarchy or vary widely in magnitude.
Props
PieSlice contains label, value, and optional color. Omitted colors use the shared palette by array position. Percentages derive from the sum of values. Slices render clockwise from twelve o’clock in array order.
| Prop | Type | Default | Description |
|---|---|---|---|
slices | PieSlice[] | — | Wedges in draw order, clockwise from 12 o'clock. Negative values contribute zero. Labels are used as React keys and must be unique. |
size | number | 132 | Diameter of the pie in pixels. |
innerRadius | number | 0 | Inset a hole to render a donut instead of a full pie. Clamped below the outer radius. |
showLabels | boolean | — | Print each wedge's percentage on the slice when it is wide enough (≥5%) to fit. |
formatValue | (slice: PieSlice) => ReactNode | — | Formats a slice's value in the legend. Default renders the raw number; the percentage column is always computed. |
noLegend | boolean | — | Hide the legend list (wedges only). Hovering the wedges still works. |
Examples
Share of total
The full form: wedges, on-slice percentages, and a legend with values. Hovering an arc or a legend row highlights the corresponding wedge.
Donut variant
A positive innerRadius opens the center. Drop the legend with noLegend for a compact ring that fits a card header.
import { PieChart } from "@solarius/onset";
import type { PieSlice } from "@solarius/onset";