Donut Chart
A pie chart with a center cutout. Perfect for displaying a key metric in the center while showing proportional data around it.
Usage
import { DonutChart } from "@chartts/react"
<DonutChart
data={trafficData}
value="visitors"
label="source"
centerLabel="1.2M"
/>Props
| Prop | Type | Description |
|---|---|---|
| data | T[] | Array of data objects |
| value | keyof T | Key for segment values |
| label | keyof T | Key for segment labels |
| innerRadius | number | Inner radius ratio. 0-1. Default: 0.6 |
| centerLabel | string | ReactNode | Content displayed in the center |
| padAngle | number | Padding between segments. Default: 2 |
Features
- Center label/metric display
- Interactive segment hover
- Custom inner radius
- Animated reveal
- Auto-positioned outside labels
- Responsive sizing
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram