Heatmap
Intensity across two categories, such as weekday by hour, on a one-hue ramp with a scale.
When to use it
The ramp runs light to dark in light mode and dark to bright in dark mode, so more is always more visible. Ramp colours must resolve to hex: ECharts interpolates them itself.
Site visits by weekday and hour
Options
Everything you can pass to Heatmap.
| Prop | Type | Default | What it does |
|---|---|---|---|
| xCategories / yCategories | string[] | — | Columns, and rows drawn top to bottom. |
| values | (number | null)[][] | — | values[row][column]; null leaves the cell empty. |
| min / max | number | data extent | Ends of the colour scale. |
| labels | boolean | false | Value in each cell, ink picked by the fill. |
| colors | string[] | accent tint → --chart-1 | Low-to-high ramp tokens. |
| height | number | string | — | Plot height. The HTML legend sits outside it. |
| valueFormatter | (value) => string | en-IN, 2 dp | Axis labels, tooltips, value labels and the hidden data table. |
| aria-label | string | — | What the chart shows. Also captions its hidden data table. |
| loading / emptyTitle / emptyDescription | boolean / string | — | Passed to Chart: skeleton, and the empty state when every value is zero. |