Heatmap

Pro

Intensity over a grid (field fill rate by object, runs by hour and day). One hue, light to dark. A missing cell is hatched and says "No data" — it's never painted as the lowest value. A legend shows the scale's ends.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/heatmap

Brings in: chart-frame, data, locale, scale

Usage

TSX · The example above

"use client"

import { Heatmap } from "@/components/heatmap"

const tables = ["users", "projects", "deployments", "invoices", "audit_log"]
const columns = ["owner_id", "region", "plan", "created_by", "archived_at"]

// Share of rows with a value; null where Keel couldn't read the column.
const fillRate: (number | null)[][] = [
  [1, 0.97, 0.88, 0.92, 0.04],
  [1, 0.91, null, 0.99, 0.12],
  [0.99, 1, null, 1, null],
  [1, 0.86, 0.95, 0.71, 0.02],
  [null, 0.64, null, 1, null],
]

export default function Example() {
  return <Heatmap className="max-w-xl" title="Fill rate by table and column" subtitle="Production · last 90 days" rows={tables} columns={columns} values={fillRate} format="percent" />
}

<Heatmap>

Prop	Type	Default	Description
titlerequired	`string`	—	What the chart shows, above it.
subtitle	`string \| undefined`	—	A line under the title, e.g. the period or unit.
rowsrequired	`string[]`	—	The row labels, top to bottom.
columnsrequired	`string[]`	—	The column labels, left to right.
valuesrequired	`(number \| null)[][]`	—	values[row][column]; null = no data.
format	`ValueFormat \| undefined`	"number"	How values are written: number, percent (0–1), currency (USD) or duration (seconds). Defaults to number.
state	`ChartState \| undefined`	—	Loading, empty, partial or error. Defaults to partial when any cell is null, else ready.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under heatmap in <LocaleProvider strings={{ … }}>; the table is exported as heatmapStrings.

Key	English
heatmap	Heatmap
missing	{ one: "{count} cell has no data (hatched).", other: "{count} cells have no data (hatched)." }
noData	No data
noDataInline	no data
cell	{row}, {column}: {value}