HeatmapChart

Matrix heatmap: one colored cell per row × column, e.g. occupancy by hour and weekday. Continuous sequential or diverging scales come from tokens; ranges switches to stepped colors. Hover and keyboard focus light the row and column of the cell.

Import

import { HeatmapChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/heatmap-chart.

Usage

<HeatmapChart
  title="Ocupación de sillas por hora y día"
  rows={days}
  columns={hours}
  values={occupancy}
  scale="sequential"
  valueFormat={percent}
  domain={[0, 100]}
  cellLabels={false}
  gap={3}
  radius={4}
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
title *	string		Accessible name of the drawing and caption of the data table.
rows *	readonly string[]		Row names, top to bottom.
columns *	readonly (string | Date)[]		Column names, left to right. When every column is a Date the columns are consecutive points in time: the header is labelled only at calendar boundaries (weeks, months, years), like a continuous time axis.
values *	readonly (readonly (number | null)[])[]		values[row][column]; null is a cell without data.
scale	"sequential" | "diverging"	"sequential"	“sequential” (empty to brand) or “diverging” (low hue, neutral at center, brand).
domain	readonly [number, number]		Fixed [min, max] of the color scale; the data extent by default.
center	number	0	Neutral value of a diverging scale.
colors	ScaleColors		Override the scale colors (CSS colors or tokens).
ranges	readonly ColorRange[]		Stepped coloring by ranges or thresholds; replaces the continuous scale.
valueFormat	ValueFormat
cellLabels	boolean	false	Values inside the cells (only where they fit).
gap	number	3	Gap between cells in pixels.
radius	number	4
shape	"rect" | "hex"	"rect"	“hex” draws a honeycomb: pointy-top hexagons with odd rows shifted half a cell.
renderer	"canvas" | "svg"	"svg"	“canvas” paints the cells on a canvas, for matrices with tens of thousands of cells. Labels, tooltip, focus ring and keyboard stay SVG/HTML.
height	number | "fill"		Height of the drawing in px or “fill”; 34 px per row plus the column header by default.
aspectRatio	number		Width / height ratio; sizes the drawing from the container width.
legend	boolean	true	Color key (gradient bar or range swatches).
tooltip	boolean	true
animate	boolean	true
loading	boolean
labels	Partial<HeatmapLabels>
onCellClick	((cell: HeatmapCellInfo) => void)
className	string

* marks a required prop.

Storybook stories

• Default
• Cell Labels
• Diverging
• Ranges
• Missing Data
• Calendar
• Calendar Ranges
• Rounded
• Honeycomb
• Continuous Datetime
• Canvas Dense
• Drilldown
• Narrow Drilldown
• Loading
• Empty
• Narrow
• Narrow Calendar

Source

packages/ui/src/charts/heatmap-chart/heatmap-chart.tsx