Heatmap

Heatmaps. Pro · Charts and analytics › Maps and matrices

Rows × columns matrix with a continuous color scale.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add heatmap

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Heatmap } from 'valyro-ui-pro';

Prop	Type	Default
`rows` *	`string[]`		Row labels, top to bottom; long ones are truncated to fit the label column.
`columns` *	`string[]`		Column labels, left to right; labels that would overlap are skipped.
`values` *	`number[][]`		`values[row][column]`. Missing or non-finite values render as empty cells.
`color`	`string`	`'var(--ui-chart-1)'`	Any CSS color. Default `--ui-chart-1`.
`valueFormatter`	`ValueFormatter`		Formats values in the tooltip, cells and data table.
`locale`	`string`		BCP 47 locale for the default number formatting. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<HeatmapLabels>`		Overrides for the built-in strings.
`showValues`	`boolean`	`false`	Print the value inside each cell (where it fits).
`cellHeight`	`number`	`28`	Default 28.
`ariaLabel` *	`string`		Accessible name of the chart (also the caption of its sr-only data table).

Map Chart — World map: choropleth and points, zoom and pan
Tile Map — Lightweight tile map: markers, route, popup cards, zoom
Cohort Retention Matrix — Cohort retention: heat table, averages, anomalies and notes
Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages
Donut Chart — Donut charts
Treemap — Hierarchies as areas, with drill-down