PieChart
Layout, center label, and legend helpers for Recharts pie charts.
stable
Quick Preview
Portfolio mix
- Lekki4242%
- Ikoyi2828%
- Yaba1818%
Usage
<PieChart config={config}>
<PieChartSeries data={data} dataKey="value" nameKey="label" type="donut">
{data.map((d, i) => (
<Cell key={d.label} fill={PIE_CHART_PALETTE[i]} />
))}
<Label content={<PieCenterLabel total="88" caption="Listings" />} />
</PieChartSeries>
</PieChart>
<PieChartLegend items={legendItems} />Pass type="pie" to fill the donut hole. Segment colours come from PIE_CHART_PALETTE — the three validated categorical chart-1…3 tokens; a fourth+ category folds into a neutral “Other” bucket rather than an un-validated hue.
Deprecated: usePieChartLayout
The usePieChartLayout hook predates recharts 3 wrapping support and is deprecated. Compose the <PieChart>/<PieChartSeries> primitives shown above instead; the hook is kept only until the next major.
Examples
Donut with legend
A donut with a center total and the rich legend (name · value · share).
Portfolio mix
- Lekki4242%
- Ikoyi2828%
- Yaba1818%
Solid pie · “Other” fold
A filled pie whose long-tail categories are folded into a neutral “Other” slot.
Financing split
Solid pie · long-tail categories folded into “Other”
- Mortgage46%
- Outright27%
- Rent-to-own15%
- Other12%
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
PieChart | root | - | Plot root: fixed square box wrapping the recharts PieChart. |
size | one of sm, md, lg | inherited | Pie layout scale. |
config | ChartConfig | {} | Series labels/icons for the shared tooltip. |
PieChartSeries | type (donut/pie) + recharts Pie props | donut | One data series; takes Cell/Label children. |
PieChartLegend | items | - | Rich legend rows: name, value, share. |
PieCenterLabel | total, caption | - | Donut center hero + caption. |
className | string | - | Local layout or spacing overrides. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.