Heatmap

Magnitude across two categorical axes: one hue, light→dark, with a stepped legend. Cell tooltips on hover, or focus + arrow keys (Up/Down change row).

Import

import { Heatmap } from '@marbleui/ui'

Props

<Heatmap>

Prop	Type	Default	Description
columns *required	`string[]`	`—`
rows *required	`string[]`	`—`
summary *required	`string`	`—`
values *required	`number[][]`	`—`	values[row][column]
cell	`number`	`24`
className	`string`	`—`
title	`ReactNode`	`—`
valueFormat	`(n: number) => string`	`formatCompact`

Usage notes

Magnitude across two categorical axes, such as weekday × hour, in one hue from light to dark. For a correlation grid with values printed in the cells use MatrixChart; for daily counts on a calendar use CalendarHeatmap.

<Heatmap
  title="Deploys by hour"
  summary="Deploys cluster on weekday afternoons, peaking around 2pm."
  rows={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
  columns={hours}
  values={deploysByDayAndHour}
  cell={18}
/>

values[row][column] must match rows and columns in length and order. Labels are used as keys, so keep them unique.
Colours are seven equal steps between the lowest and highest value, not from zero; the legend prints both ends with valueFormat.
cell sets each square in pixels (default 24). The grid doesn’t shrink to fit, so lower it for many columns. At most 12 column labels are printed; the rest appear in the tooltip and table.
Tab focuses the grid and shows the first cell; Left/Right step along a row, Up/Down change row, Home/End jump to the ends and Escape hides. A live region reads each cell, and the “Show data” table lists them all.

Example source · show

import { Heatmap } from './heatmap'

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
const hours = Array.from({ length: 24 }, (_, h) => `${h}`)
const values = days.map((_, d) => hours.map((_, h) => Math.round((d < 5 ? 1 : 0.4) * (Math.exp(-((h - 14) ** 2) / 18) * 100 + Math.exp(-((h - 10) ** 2) / 10) * 60) + ((d * 7 + h) % 5))))

export const styles = {
  'Day × hour': () => <Heatmap title="Deploys by hour" summary="Deploys cluster on weekday afternoons, peaking around 2pm." rows={days} columns={hours} values={values} cell={18} />,
}

Source: packages/ui/src/heatmap/heatmap.tsx

Catalog