Radial Chart Card
Radial bars in the dashboard card shell - rounded arcs over the chart track, hover darkening one tone like every other BoardUI chart, and a count-up headline that follows the hovered ring. Six looks from one prop: plain, labelled, or gridded rings, thin and solid single-value gauges, and a stacked half gauge.
Visitors
925
+5.2%Installation
Radial Chart Card is part of BoardUI Pro.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
Variants
rings (default), labels, and grid draw one ring per item. gauge and solid show a single value against max with the percentage in the centre; stackedfolds the items into a half gauge whose centre shows the primary segment's share and follows the hovered one.
{/* Ring names set along each arc */}<RadialChartCard variant="labels" />
{/* No tracks - rings over a circular grid */}<RadialChartCard variant="grid" />
{/* Single value against a goal, percent in the centre */}<RadialChartCard variant="gauge" data={[{ label: "Visitors", value: 1260 }]} max={2000} delta={0.052} range="Last 7 days" />
{/* Thicker ring on a raised disc */}<RadialChartCard variant="solid" data={[{ label: "Visitors", value: 1260 }]} max={2000} delta={0.052} range="Last 7 days" />
{/* Half gauge of stacked segments with a legend */}<RadialChartCard variant="stacked" data={[ { label: "Desktop", value: 1260 }, { label: "Mobile", value: 570 }, ]} delta={0.052} range="Last 7 days"/>With tiles
tiles adds a stat tile per item under the chart - swatch and name over the value, three per row with the last row stretched to full width - and lets the card grow to fit. Hovering a tile focuses its ring and vice-versa.
{/* Stat tiles under the rings: three per row, the last row full width (5 → 3 + 2) */}<RadialChartCard tiles />Data
data is a flat { label, value, color? } list. Add an item and it becomes a ring or segment, colours cycle the chart palette unless you set one, and max sets the full-circle value. The period pill is a dropdown when you pass ranges - each range carries its own data (and optionally delta / headline) and the chart re-animates on selection; onRangeChange lets you fetch instead. With no data props the card ships three demo ranges, which is what the previews above use.
// One item per ring / segment. First item = innermost ring.const data = [ { label: "Other", value: 90 }, { label: "Edge", value: 173 }, { label: "Firefox", value: 187 }, { label: "Safari", value: 200 }, { label: "Chrome", value: 275, color: "var(--color-chart-6)" }, // override any colour];
<RadialChartCard title="Visitors" data={data} max={300} // full-circle value; defaults to 110% of the largest ring headline={925} // optional resting headline (defaults to the total) delta={0.052} range="Jan – Jun 2024" // static pill…/>
// …or a working period dropdown: each range overrides data / max / delta / headline.<RadialChartCard variant="gauge" ranges={[ { id: "7d", label: "Last 7 days", data: [{ label: "Visitors", value: 1260 }], max: 2000, delta: 0.052 }, { id: "30d", label: "Last 30 days", data: [{ label: "Visitors", value: 4820 }], max: 6000, delta: 0.081 }, { id: "90d", label: "Last 90 days", data: [{ label: "Visitors", value: 12400 }], max: 15000, delta: -0.024 }, ]}/>