Search for a command to run...
A token-tinted matrix — rows × columns, each cell's value mapped to fill intensity, with optional grouped sections and a staggered cell reveal. For two-dimensional comparisons Recharts can't express.
Define columns and rows; each row holds a values map keyed by column key. Cell
intensity is value scaled across domain onto intensityRange, tinting the base color.
Give consecutive rows the same group to print a rotated section label on the left, with a
divider between sections. The row-label column flexes to fill the available width.
ChartHeatmap| Prop | Type | Default | Description |
|---|---|---|---|
columns | HeatmapColumn[] | — | Column headers. label is any ReactNode (e.g. two-line). |
rows | HeatmapRow[] | — | Each row's values are keyed by column key. |
domain | [number, number] | [0, 1] | Value range mapped onto cell intensity. |
color | string | var(--success) | Base cell color. Use a token var. |
intensityRange | [number, number] | [0.1, 0.92] | Tint fraction at the domain floor and ceiling. |
cellWidth | number | 128 | Max width of each value cell, in px — cells stay this wide while the label column fills. |
formatValue | (v: number) => string | whole percent | Maps a raw value to its cell label. |
animate | boolean | true | Stagger each row's cells in on scroll. |
color that carries the right meaning — var(--success) for "more is better", var(--destructive) for error/failure rates.domain to the real value range so the tint scale uses the full contrast band.group to chunk long rule lists into labeled sections, like the rule categories.<table> of tinted <td>s. This handles the scale, the contrast flip, and the reveal.