Heatmap Chart Card
A matrix heatmap in the dashboard card shell - weekday × hour, region × month, anything with two axes. Cells mix the accent into the chart track by value so the ramp follows the theme in both modes; hovering a cell rings it, darkens its row and column labels, and swaps the headline to that cell's value. Plain CSS grid, no chart library.
Active users
1,892
+5.2%Installation
Heatmap Chart Card is part of BoardUI Pro.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
Data
rows is { label, values[] }[] and columns names the value slots. Add a row or a column and the grid reflows; color swaps the ramp accent and max pins the saturated end. 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 entry per row; values line up with `columns`.const columns = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];const rows = [ { label: "EMEA", values: [42, 48, 55, 61, 70, 74] }, { label: "AMER", values: [38, 40, 47, 52, 58, 66] }, { label: "APAC", values: [21, 25, 29, 36, 41, 49] }, { label: "LATAM", values: [12, 14, 15, 19, 24, 27] },];
<HeatmapChartCard title="Revenue by region" columns={columns} color="var(--color-chart-7)" // ramp accent; defaults to chart-6 blue max={80} // fully saturated cell; defaults to the largest value ranges={[ // period dropdown - each range overrides rows / columns / max / delta { id: "h1", label: "H1 2024", rows: h1Rows, delta: 0.118 }, { id: "h2", label: "H2 2024", rows: h2Rows, delta: 0.064 }, ]}/>
// Or a static pill: rows={rows} range="H1 2024"