Charts

Heatmap

Compares labeled matrix values with a theme-aware color scale and exact accessible data table.

idle

Usage

import { Heatmap } from "@mizen-labs/ui";

A heatmap with a missing observation and a text table equivalent.

Seven days by twelve two-hour buckets in a compact grid.

Guidance	Practice
Do	Name both matrix dimensions and the value scale. Keep exact values available through the data table.

Guidance	Boundary
Scope	Color shows magnitude, not causation. Use a table when reading individual values is the primary task.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`aria-label`	`string`	`Required`	Names the chart and its data table.
`columns / rows`	`readonly string[] / readonly HeatmapRow[]`	`Required`	Provides unique labels and rectangular row values. Values are finite non-negative numbers or null for missing observations.
`valueLabel`	`string`	`Value`	Names values in the legend and tooltip.
`max`	`number`	`Observed maximum`	Sets the upper color-scale value. Values above it use the highest color bucket.
`formatValue`	`(value: number) => string`	`String(value)`	Formats numeric values in tooltips, the legend, and the data table.
`tone`	`ChartSeriesTone`	`series1`	Selects a supported semantic chart tone.