PieChart
v1.0.9Updated 20 Oct 2026Recharts-backed pie / donut chart with external labels and click-to-highlight mode. Use for part-of-whole when there are 2-6 slices.
Preview
Live · 8 storiesDefaultOpen ↗
▸Why this is recommendedchartpiedonutrecharts+3
The default, out-of-the-box PieChart.
Recommended for+14
- ✓Status mix
- ✓Channel mix
- ✓Up to ~6 slices
Tags+6
chartpiedonutrechartspart-of-wholedata-vizdefault
Features+4
- Pie / donut modes
- External labels (with leader lines)
- centerLabel drawn in the donut hole (value + caption)
- Click-to-highlight slice
- Custom palette
- Mount reveal that can never leave the plot empty — the chart is measured before it mounts and pinned to its final geometry once the reveal ends, so a host re-render or a stalled animation frame cannot blank it
- i18n: numbers/axis values format per LocaleProvider locale
Not recommended for−2
- ✕> 6 slices (use BarChart)
- ✕Trend over time (use AreaChart)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
dataSlices
yesdonutDonut mode
—