HeatmapChart
Token-native SVG cell-matrix heatmap with sequential (red/blue/neutral) and diverging color scales from DS dataviz tokens — correlation matrices, factor exposure grids, settlement timing, risk concentration
import { HeatmapChart } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
cellsreq | HeatmapCell[] | — | Cell data — {col, row, value, label?} |
columns | string[] | — | Explicit column order (defaults to first occurrence) |
rows | string[] | — | Explicit row order (defaults to first occurrence) |
title | string | — | Chart title |
asOf | string | — | As-of date shown right of the title |
colorScale | 'sequential-red' | 'sequential-blue' | 'sequential-neutral' | 'diverging' | sequential-blue | Color scale family |
domain | [number, number] | — | Override value domain (defaults to data min/max) |
valueFormat | 'percent' | 'integer' | 'decimal' | 'none' | decimal | In-cell value formatting |
cellSize | number | 40 | Cell size in px |
ariaLabel | string | — | Accessible label override (falls back to title) |
style | CSSProperties | — | Style override |
cellsrequiredHeatmapCell[]Default —Cell data — {col, row, value, label?}
columnsstring[]Default —Explicit column order (defaults to first occurrence)
rowsstring[]Default —Explicit row order (defaults to first occurrence)
titlestringDefault —Chart title
asOfstringDefault —As-of date shown right of the title
colorScale'sequential-red' | 'sequential-blue' | 'sequential-neutral' | 'diverging'Default sequential-blueColor scale family
domain[number, number]Default —Override value domain (defaults to data min/max)
valueFormat'percent' | 'integer' | 'decimal' | 'none'Default decimalIn-cell value formatting
cellSizenumberDefault 40Cell size in px
ariaLabelstringDefault —Accessible label override (falls back to title)
styleCSSPropertiesDefault —Style override
Accessibility
- Wrapper renders role="group" and the SVG role="img", both labelled from ariaLabel ?? title.
- Each populated cell carries role="cell" with an aria-label of "row × col: value".
- Cell text switches to inverse color on dark cells (normalized value > 0.7) to preserve contrast.
- Values are printed inside cells (valueFormat) so the encoding is never color-only.
Heatmap requires min 320px for legible cells. Wrap in overflow-x-auto.
This component was designed to express:
Explore Related
Two-dimensional risk heatmap grid with severity-colored cells
Currency pair × business unit exposure matrix. Blue = long, red = short, intensity = magnitude. Row/column totals. Click-to-drill support
Multi-factor exposure heatmap across time periods with threshold-based coloring