Radial Bar Chart
Circular progress bars for comparing values. Each bar wraps around the center, making it easy to compare completion levels.
Usage
import { RadialBarChart } from "@chartts/react"
<RadialBarChart
data={progressData}
value="completion"
label="task"
max={100}
/>Props
| Prop | Type | Description |
|---|---|---|
| data | T[] | Array of data objects |
| value | keyof T | Key for bar values |
| label | keyof T | Key for labels |
| max | number | Maximum value. Default: 100 |
| innerRadius | number | Inner radius ratio. Default: 0.3 |
| gap | number | Gap between bars. Default: 4 |
Features
- Multiple concentric bars
- Percentage labels
- Animated fill on mount
- Custom color per bar
- Center content slot
- Responsive sizing
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram