Radar Chart Card
A radar chart in the dashboard card shell - polygon grid in the chart tokens, count-up headline that follows the hovered axis, delta chip and period pill, and a pulsing active dot on every series. One prop switches between filled, dotted, lines-only, and a centre-score layout.
Visitors
1,424
+5.2%Installation
Radar Chart Card is part of BoardUI Pro.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
Variants
variant picks the look: filled (default), dots, lines for comparing series, and score, which prints each axis value beside its label and averages them into a raised centre disc. tiles (as in the preview above) adds a stat tile per axis under any of them and lets the card grow.
{/* Dots on every vertex */}<RadarChartCard variant="dots" />
{/* Outline only - two series and a legend */}<RadarChartCard variant="lines" series={[ { key: "desktop", label: "Desktop" }, { key: "mobile", label: "Mobile" }, ]}/>
{/* Centre score: each axis label carries its value, low ones turn rose */}<RadarChartCard variant="score" alertBelow={30} />Data
data is a flat list of rows - one per axis - keyed by label, with a numeric field per series. series names those fields and, optionally, their colours; everything else (radius ceiling, totals, legend values, hover states) is derived. 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.
const data = [ { label: "January", desktop: 186, mobile: 80 }, { label: "February", desktop: 305, mobile: 200 }, { label: "March", desktop: 237, mobile: 120 }, { label: "April", desktop: 273, mobile: 190 }, { label: "May", desktop: 209, mobile: 130 }, { label: "June", desktop: 214, mobile: 140 },];
<RadarChartCard title="Visitors" data={data} series={[ { key: "desktop", label: "Desktop" }, // palette colour { key: "mobile", label: "Mobile", color: "var(--color-chart-6)" }, // or your own ]} max={320} // optional radius ceiling (defaults to the largest value) headline={1424} // optional resting headline (defaults to the primary total) delta={0.052} // "+5.2%" chip range="Jan – Jun 2024" // static pill…/>
// …or a working period dropdown: each range overrides data / delta / headline.<RadarChartCard title="Visitors" series={[{ key: "desktop", label: "Desktop" }]} ranges={[ { id: "h1", label: "H1 2024", data: h1Data, delta: 0.052 }, { id: "h2", label: "H2 2024", data: h2Data, delta: 0.081 }, { id: "year", label: "2024", data: yearData, delta: 0.067 }, ]} defaultRange="h1" onRangeChange={(id) => track("radar_range", { id })}/>