Heatmap

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A grid-based heatmap with pattern fills for intensity levels. Uses patterns where color cannot differentiate data.

The cells fill whatever box the chart is given, stretching with it, including a widget's stored preview, while their outlines, patterns and labels keep their size. Column labels sit above the grid and row labels down its left.

Import

import { Heatmap } from "~lib/charts/heatmap";

Props

Name	Type	Required	Default	Description
`data`	`{ x: number; y: number; value: number }[]`	Yes	N/A	Grid data points
`rows`	`number`	Yes	N/A	Number of rows
`columns`	`number`	Yes	N/A	Number of columns
`cellSize`	`number`	No	N/A	Deprecated: no effect; cells fill the chart
`xLabels`	`string[]`	No	N/A	Column labels
`yLabels`	`string[]`	No	N/A	Row labels
`showValues`	`boolean`	No	`false`	Show values in cells
`width`	`number \| string`	No	`300`	Chart width
`height`	`number \| string`	No	`300`	Chart height

Intensity mapping: the data's range is split into equal bands, and each cell is shaded by the band its value falls in — lowest = dots, then diagonal, then crosshatch, highest = solid. A cell with no value is left empty.

Examples

Import​

Props​

Examples​

Default​

With Labels​

With Values​

Weekly Activity​

See Also​

Import

Props

Examples

Default

With Labels

With Values

Weekly Activity

See Also