RadialBar
Concentric radial bars (a circular gauge family) — each datum is a ring whose sweep is proportional to its value.
Category: chart · WCAG 2.1-AA · chart, radial, gauge, progress, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | RadialBarDatum[] | — | One ring per datum: { id, label, value, color? }. |
title | string | — | Chart title (also used as aria-label). |
description | string | — | Subtitle below the title. |
size | number | — | Square shorthand (width === height). Explicit width/height win. |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 300 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
max | number | — | Domain top — the value a full sweep represents. Defaults to the largest datum. |
sweep | number | 270 | Sweep angle in degrees (270 = a gauge arc; 360 = a full ring). |
centerValue | string | — | Text in the hole. |
centerLabel | string | — | Caption below centerValue. |
centerSlot | ReactNode | — | Arbitrary hole content; wins over centerValue/centerLabel. |
tooltip | boolean | — | Enable hover tooltip. |
legend | boolean | — | Show ring legend. |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no legend. For micro/inline charts. |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8--cascivo-chart-grid
When to use
- Showing a few progress-to-goal values in a compact circular form
- A dashboard KPI cluster where each metric is a ring toward its target
When not to use
- Comparing many categories precisely — use BarChart
- Part-of-whole of a single total — use PieChart
Examples
Goal progress rings
import { RadialBar } from '@cascivo/charts'
<RadialBar
title="Quarterly goals"
max={100}
centerValue="72%"
centerLabel="On track"
data={[
{ id: 'rev', label: 'Revenue', value: 84 },
{ id: 'nps', label: 'NPS', value: 61 },
{ id: 'ret', label: 'Retention', value: 72 },
]}
/>