Heatmap
Intensity matrix (auth rate by hour × weekday, error density by shard × time). Cell opacity ramps with the 0-100 value over the base color.
Component behavior
Heatmap displays a matrix of values using cell opacity. Both axes represent categories. Values specify intensities from 0 to 100.
- One numeric intensity at each combination of two categories.
- Dense category matrices with readable row labels.
- Clusters, periodicity, or variation across rows.
BarChart: one category axis or precise magnitude comparison is required.
LineChart: a small set of time series is sufficient.
ChoroplethMap: cells represent named regions.
UptimeStrip: the data is one sequence of interval statuses.
DataGrid: the view requires sortable numeric values.
Props
HeatmapRow contains a label and values array. Values must be intensities from 0 to 100. Opacity is 0.06 + v / 100 × 0.94; values above 100 clamp. Normalize raw data before rendering. xLabels must contain one entry per column.
| Prop | Type | Default | Description |
|---|---|---|---|
rows | HeatmapRow[] | — | Rows top to bottom. Each row's values are 0-100 intensities, one per column, clamped to that range. The label is a ReactNode rendered in a fixed 30px gutter. |
xLabels | ReactNode[] | — | Column labels below the grid. Label count must match column count. Use empty strings for unlabeled columns. |
color | string | "var(--m-color-primary)" | The single hue every cell ramps toward. Intensity is opacity over it, so a low-contrast color yields a low-contrast map. |
cellHeight | number | 14 | Cell height, in pixels. Cell widths fill the container with a 4px minimum. |
renderTooltip | (rowIndex: number, colIndex: number) => ReactNode | — | Tooltip renderer receiving row and column coordinates. Positioned above the cell without edge flipping. |
Examples
Hour by weekday
The example uses 24 columns and seven rows. Empty label strings preserve column alignment between the three-hour labels. Hovering outlines the cell and sets its opacity to full.
Input normalization
Raw request counts above 100 clamp to full opacity. The examples compare raw counts with counts divided by their maximum. A per-row maximum shows variation within each row; a shared maximum supports comparisons across rows.
Color and cell height
color and cellHeight control appearance. Cell width fills the available container width. Choose a color that matches the metric meaning, such as an error tone for failure counts.
import { Heatmap } from "@solarius/onset";
import type { HeatmapRow } from "@solarius/onset";
<Heatmap
rows={[
{ label: "Mon", values: [22, 35, 45, 60, 75, 58, 40, 30] },
{ label: "Tue", values: [18, 30, 40, 55, 80, 65, 45, 35] },
]}
xLabels={[
"00:00",
"03:00",
"06:00",
"09:00",
"12:00",
"15:00",
"18:00",
"21:00",
]}
color="var(--m-color-warn)"
cellHeight={18}
/>;