Radial Chart
Progress toward a limit, drawn as rings. Good for quotas, capacity, and gauges.
Set max for a quota
max is what makes a ring mean "800 out of 1,000" rather than just "800, bigger than the other one". Leave it off only when the rings are meant to be compared against each other rather than against a ceiling. On the gauge arcs it does something you can see directly: whatever is left over is drawn as track.
Concentric rings
These three are thin RadialBarChart wrappers: one full ring per row, stacked inward. grid adds a faint polar grid behind them, and stacked-label overlays a center value on the same layout.
multione ring per rowgrid+ polar grid behindstacked-label+ center overlayGauge arcs
These stack the rows angularly along a single 240° band rather than as concentric rings, so they take two or three rows, not five. shape keeps the unfilled remainder as track; stacked has no max, so its rows fill the arc exactly and no track shows.
shapetwo rows of 200, remainder as trackstackedno max, rows fill the arcstacked-3-layerssized for a 3-row breakdownTick gauge
A dial built from individual radial tick marks. RadialBarChart can't express this (or the arcs above), so it's hand-rolled from the exported Sector primitive.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number; max?: number }[] | One ring per entry. max sets what a full ring means; without it the values are read against each other. | |
| variant | 'multi' | 'grid' | 'text' | 'shape' | 'gauge-tick' | 'stacked' | 'stacked-3-layers' | 'stacked-label' | 'multi' | Ring layout, including the gauge treatments. |
| centerValue | string | Large figure in the middle. | |
| centerCaption | string | Caption under the center value. | |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Preset diameter. |