Charts
Pie Chart
Build pie and donut charts for part-to-whole comparisons
Pie charts display data as proportional slices of a circle.
Simple Pie Chart
Donut Chart
Set innerRadius to create a donut.
Pie Chart with Labels
Set :label="true" to show labels outside each slice.
Half Pie Chart
Use startAngle and endAngle to create a semicircle.
Pie props
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | number | Function | required | Key from data |
data | Array | — | Pie data array |
nameKey | string | 'name' | Key for slice names |
cx | number | string | '50%' | Center X |
cy | number | string | '50%' | Center Y |
innerRadius | number | 0 | Inner radius (0 = pie, >0 = donut) |
outerRadius | number | string | '80%' | Outer radius |
startAngle | number | 0 | Start angle in degrees |
endAngle | number | 360 | End angle in degrees |
paddingAngle | number | 0 | Gap between slices |
activeIndex | number | -1 | Active slice index |
label | boolean | false | Show labels |
isAnimationActive | boolean | true | Enable animation |