Pie Chart
A pie and donut chart for proportional data with labels, legends, and nested ring support.
Usage
Custom Tooltip
Donut
Donut With Content
Donut With Label
Nested Donut
With Breakdown
CSS Classes
Element Classes
.pie-chart— Root container wrappingResponsiveContainerand the Recharts chart.
Recharts Theming
The following CSS rules target Recharts internal class names to apply HeroUI design tokens automatically:
.pie-chart .recharts-pie-sector path— Pie sector strokes. Removed to avoid messy convergence at the center; usepaddingAngleon<PieChart.Pie>for clean slice separation..pie-chart .recharts-pie-label-text— Outside label text. 11px muted..pie-chart .recharts-pie-label-line— Connector lines from slice to label. Muted at 0.3 opacity..pie-chart .recharts-label— Center label text for donut charts. Uses foreground color..pie-chart .recharts-tooltip-cursor— Tooltip cursor. Hidden for pie charts..pie-chart .recharts-tooltip-wrapper— Tooltip wrapper. Elevated z-index to render above center content.
API Reference
PieChart
The root wrapper. Renders a ResponsiveContainer + Recharts PieChart with HeroUI CSS theming applied automatically.
| Prop | Type | Default | Description |
|---|---|---|---|
height | number | 300 | Chart height in pixels. |
width | number | `${number}%` | "100%" | Chart width in pixels or percentage string. |
children | ReactNode | — | Recharts child components (PieChart.Pie, PieChart.Cell, etc.). |
Also supports all native div HTML attributes.
PieChart.Pie
Re-exported Recharts Pie component. Follows the Recharts Pie API.
PieChart.Cell
Re-exported Recharts Cell component. Follows the Recharts Cell API.
PieChart.Label
Re-exported Recharts Label component. Follows the Recharts Label API.
PieChart.Tooltip
Re-exported Recharts Tooltip component. Follows the Recharts Tooltip API. Use with PieChart.TooltipContent for styled tooltips.
PieChart.TooltipContent
Pre-built tooltip renderer for Recharts. Pass as the content prop of PieChart.Tooltip. See ChartTooltip for full props.