PieChart
Responsive pie and donut chart with customizable appearance.
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
data* | PieChartDataItem[] | — | — |
dataKey | string | — | |
nameKey | string | — | |
innerRadius | number | string | — | |
outerRadius | number | string | — | |
paddingAngle | number | — | |
cornerRadius | number | — | |
startAngle | number | — | |
endAngle | number | — | |
showLabels | boolean | — | |
labelType | 'value' | 'percent' | 'name' | 'custom' | — | |
labelRenderer | (entry: PieChartDataItem) => string | — | — |
centerLabel | ReactNode | — | — |
centerLabelRenderer | (
visibleTotal: number,
visibleCount: number,
... | — | — |
Usage
// Simple pie chart
<PieChart
data={[
{ name: 'Category A', value: 400 },
{ name: 'Category B', value: 300 },
{ name: 'Category C', value: 200 },
]}
/>
// Donut chart with center label
<PieChart
data={categoryData}
innerRadius="60%"
centerLabel={<>$12,450</>}
/>
// With labels
<PieChart
data={categoryData}
showLabels
labelType="percent"
/>