Chart Radial Bar
Radial bar charts render each value as a concentric arc. Built as a self-contained SVG component with gradient bars, a glow, background tracks, and inline labels.
Labeled
Concentric bars with inline labels, gradient fills, and a legend.
API Reference
Props, events, and slots for each sub-component.
ChartRadialBar
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | Record<string, any>[] | — | One row per ring. |
| config | ChartConfig | — | Map of name → { label, color }. |
| valueKey | string | "value" | Row key for the bar value. |
| nameKey | string | "name" | Row key matched against config. |
| innerRadius | number | 35 | Inner radius of the band. |
| outerRadius | number | 110 | Outer radius of the band. |
| barSize | number | 22 | Thickness of each bar. |
| max | number | 100 | Value mapped to a full sweep. |
| gradient | boolean | true | Fill bars with a gradient. |
| glow | boolean | true | Apply a glow filter. |
| background | boolean | true | Render background tracks. |
| showLabels | boolean | true | Render inline labels. |
| legend | boolean | true | Render a legend below. |