Heatmap
Values across two categories as a grid of shaded cells, darker for more: by place and sector, or by day and hour.Places and sectors
Preview
Code
Active projects, by state and sectorSeptember 2026
0–10
10–20
20–30
30–40
40–50
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/chartsnpm
npm install @advui/chartsUsage
import { Heatmap } from '@advui/charts'
<Heatmap
title="Active projects"
data={[{ state: 'Kachin', health: 34, wash: 21 }, { state: 'Shan', health: 41, wash: 28 }]}
index="state"
series={[{ key: 'health', label: 'Health' }, { key: 'wash', label: 'WASH' }]}
/>Examples
Days and hours, with a gap
Preview
Code
Reports submitted, by day and timeLast four weeks; Wednesday evening was not recorded
0–10
10–20
20–30
30–40
40–50
50–60
No data
Change, on a diverging scale
Preview
Code
Change in active projects since AugustOrange for fewer projects, blue for more
-30 to -20
-20 to -10
-10 to 0
0–10
10–20
20–30
API reference
Heatmap
| Prop | Type | Default | Description |
|---|---|---|---|
title required | string | — | Names the chart: its heading and accessible name. |
description | string | — | Muted line under the title (units, period). |
data required | T[] | — | One object per row of cells. Its type `T` (an interface works) is inferred, and `index` and `series` must name its fields. A missing value leaves its cell gray. |
index required | keyof T & string | — | Field holding each row’s name. |
indexLabel | string | `index` | Heading of the row-name column in the table view. |
series required | { key: keyof T & string; label: string }[] | — | Numeric fields, one column of cells each. An array declared apart from the chart needs `as const` to keep its keys literal. |
color | 'chart1' | 'chart2' | 'chart3' | 'chart4' | 'chart5' | 'chart6' | 'chart7' | 'chart8' | 'chart1' | The palette color whose shades fill the cells. They step at round values (0–10, 10–20…), four to six of them, from the smallest value or zero to the largest. On a diverging scale, the color above `midpoint`. |
scale | 'sequential' | 'diverging' | 'sequential' | `diverging` shades `negativeColor` below `midpoint` and `color` above it, darker further away, in two to four round steps on each side: for changes, or values around a target. |
midpoint | number | 0 | Diverging: the value where the two colors meet. It takes the color above it. |
negativeColor | 'chart1' | 'chart2' | 'chart3' | 'chart4' | 'chart5' | 'chart6' | 'chart7' | 'chart8' | 'chart2' | Diverging: the palette color below `midpoint`. `chart1` and `chart2` stay apart for color-blind readers. |
text | { noData } | — | The legend entry for empty cells ("No data"), for translation. |
valueFormatter | (value: number) => string | — | Formats tooltip and table values. Legend ranges are compact (1.2K). |
height | number | — | Pixels. By default 32 per row, plus the column labels. |
width | number | — | Fixed width. By default it fills its container. |
labels | Partial<ChartLabels> | — | "Show table", "Hide table" and the keyboard hint, for translation. |
Accessibility
- The chart is a
figurenamed by its title. The plot is one focusable image whose name gives the title, description and a hint; the arrow keys move between cells (Left and Right along a row, Up and Down along a column, Home and End to the first and last), and a polite live region reads the row, column and value. - Every chart has a table view ("Show table") with the same values, so nothing depends on telling shades apart or hovering.
- The legend gives each shade’s range, and empty cells have their own entry, so a cell can be read without the tooltip.
- Shades are one palette color (
chart1…chart8) at rising opacity over the background, checked in light and dark mode.
| Key | Action |
|---|---|
| Tab | Focuses the plot, then the table button. |
| Left / Right arrow | Move along a row. |
| Up / Down arrow | Move along a column. |
| Home / End | Move to the first or last cell. |
| Escape | Hides the tooltip. |
Responsive behavior
Cells share the width; row names longer than 160px are cut, and column labels thin out when they would overlap.
Platform notes
Web
SVG in the page. Hover a cell to show its tooltip; the arrow keys work once the plot has focus.
iOS
Drawn with react-native-svg. Tap a cell to show its tooltip. VoiceOver and TalkBack read the title and description, without the arrow-key hint; Show table lists every value.
Android
Same as iOS.