Charts

HeatmapNew in 0.7.0

A rows × columns matrix colored by value — activity by hour, correlation tables, cohort retention. Single-hue by default, or bring any color scale.

Heatmap

Preview

Missing dataPin domain to 0–100Print values

Click a cell.

Usage

tsx

import { Heatmap } from "@vesture/react";

<Heatmap
  rows={["Mon", "Tue", "Wed"]}
  columns={["9a", "1p", "5p"]}
  values={[[12, 40, 25], [30, null, 18], [44, 51, 9]]}
  width={520}
  height={240}
  domain={[0, 60]}
  emptyColor="#eee"
  colorScale={(t) => `hsl(210 70% ${95 - t * 55}%)`}
  onCellClick={({ row, column, value }) => inspect(row, column, value)}
/>

Behavior

By default cell opacity encodes value within the matrix's own min–max in one color. domain pins that range so two heatmaps are comparable, and values outside it clamp.
colorScale maps a normalized 0–1 intensity (and the raw value) to any CSS color — use it for diverging scales (blue ↔ red around zero) or multi-hue ramps.
null cells are left empty, or painted with emptyColor. Values print inside cells when they fit, switching text color for contrast; renderCell replaces that content.
onCellClick receives row/column names and indexes, including for empty cells, so a drill-down can explain a gap.

Props

Prop	Type	Default	Description
rows / columns	string[]	—	Required. Axis labels.
values	(number \| null)[][]	—	Required. values[row][column].
width / height	number	—	Required.
color	string	chart series 1	High-end color for the default opacity scale.
colorScale	(t: number, value: number) => string	—	Overrides color; cells render fully opaque.
domain	[number, number]	—	Pins the min/max mapped to 0 and 1.
emptyColor	string	—	Fill for null cells.
gap / cellRadius	number	2 / 0
rowLabelWidth / columnLabelHeight	number	72 / 28	Gutters for axis labels.
showValues	boolean	true	Print values in cells that are big enough.
formatValue	(value: number) => string	String
renderCell	({ row, column, value, t, width, height }) => ReactNode	—	Custom SVG inside a cell.
onCellClick	({ row, column, value, rowIndex, columnIndex }) => void	—