Pie / Donut Chart
Show proportional data as circular segments. Toggle between pie and donut with a single prop.
Usage
import { PieChart } from "@chartts/react"
<PieChart
data={budgetData}
value="amount"
label="category"
donut
innerRadius={0.65}
padAngle={2}
/>Props
| Prop | Type | Description |
|---|---|---|
| data | T[] | Array of data objects |
| value | keyof T | Key for segment values |
| label | keyof T | Key for segment labels |
| donut | boolean | Render as donut. Default: false |
| innerRadius | number | Inner radius for donut. 0-1. Default: 0.6 |
| padAngle | number | Padding between segments in degrees. Default: 1 |
| cornerRadius | number | Corner radius for segments. Default: 4 |
Features
- Pie and donut modes
- Interactive segment selection
- Label placement (inside, outside, none)
- Animated segment entry
- Center label for donut charts
- Custom color per segment
Other Charts
Line ChartBar ChartArea ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram