Which cells carry numbers?

Only the peaks (398 and 412 in the sample). The rest read by shade, from low to high as the legend shows.

Weekdays down the side (Mon to Sun) and hours across (00:00 to 22:00).

What data does the component expect?

One data object in the sample’s shape: a value per cell of two dimensions. The docs page lists every field and links its JSON Schema; the sample data comes with the component, so you can start from it and swap in your own.

How do I change its colours?

Series take the preset’s data colours in order, and states such as up, down or warning take its status colours. Change the preset in Figma or in code to recolour every chart at once.

Which sizes does it ship in?

XS, S, M and L, in light and dark. Each size is laid out again from the data, so text and lines keep their size.

Does it animate when the data changes?

Yes. It plays in when it scrolls into view, and when the data changes every mark moves from its old place to its new one. With reduced motion on, it does not move.

Is it in the Figma kit and the code library?

Yes. The React component is free in the public registry in Hearth, no token needed; Signal comes with Code and Complete. The Figma component comes with Figma and Complete.

How do I install it with my coding agent?

Ask for it by name. The MCP server tells the agent what data it needs and runs the same command: npx shadcn add @chartory/heatmap. You review the diff.

Heatmap

Two dimensions, shaded by value.

Definition · Updated Nov 2, 2026

A heatmap lays out a grid of two dimensions, such as weekday and hour, and shades each cell by its value, so busy and quiet patches show at once. Use it for transactions by hour, tickets by team and day, or any count across two axes.

Get Chartory · from $149 Open in Figma Open in

Pay once. Every update included.

Live preview

Card transactions by hour
Day	00:00	02:00	04:00	06:00	08:00	10:00	12:00	14:00	16:00	18:00	20:00	22:00
Mon	4%	3%	9%	30%	49%	63%	70%	72%	91%	62%	37%	14%
Tue	4%	3%	9%	32%	53%	63%	78%	70%	83%	61%	37%	15%
Wed	5%	3%	9%	31%	54%	69%	72%	80%	91%	62%	40%	14%
Thu	5%	3%	10%	33%	57%	74%	83%	79%	94%	63%	39%	14%
Fri	5%	3%	10%	37%	54%	78%	72%	82%	97%	100%	43%	14%
Sat	4%	2%	7%	24%	38%	56%	59%	63%	70%	52%	29%	10%
Sun	2%	1%	4%	15%	30%	35%	41%	42%	48%	32%	21%	7%

Card transactions by hour
Day	00:00	02:00	04:00	06:00	08:00	10:00	12:00	14:00	16:00	18:00	20:00	22:00
Mon	4%	3%	9%	30%	49%	63%	70%	72%	91%	62%	37%	14%
Tue	4%	3%	9%	32%	53%	63%	78%	70%	83%	61%	37%	15%
Wed	5%	3%	9%	31%	54%	69%	72%	80%	91%	62%	40%	14%
Thu	5%	3%	10%	33%	57%	74%	83%	79%	94%	63%	39%	14%
Fri	5%	3%	10%	37%	54%	78%	72%	82%	97%	100%	43%	14%
Sat	4%	2%	7%	24%	38%	56%	59%	63%	70%	52%	29%	10%
Sun	2%	1%	4%	15%	30%	35%	41%	42%	48%	32%	21%	7%

Card transactions by hour
Day	00:00	02:00	04:00	06:00	08:00	10:00	12:00	14:00	16:00	18:00	20:00	22:00
Mon	4%	3%	9%	30%	49%	63%	70%	72%	91%	62%	37%	14%
Tue	4%	3%	9%	32%	53%	63%	78%	70%	83%	61%	37%	15%
Wed	5%	3%	9%	31%	54%	69%	72%	80%	91%	62%	40%	14%
Thu	5%	3%	10%	33%	57%	74%	83%	79%	94%	63%	39%	14%
Fri	5%	3%	10%	37%	54%	78%	72%	82%	97%	100%	43%	14%
Sat	4%	2%	7%	24%	38%	56%	59%	63%	70%	52%	29%	10%
Sun	2%	1%	4%	15%	30%	35%	41%	42%	48%	32%	21%	7%

Sample data: card transactions by weekday and hour over 7 days, the busiest cells at 398 and 412

Size

Legend

Data shape: A value per cell of two dimensions
Good for: Activity by day and hour, counts by two axes
Avoid when: Readers need exact values in every cell
Sizes: XS, S, M and L, re-laid out from the data

Anatomy

Inspect it like the Figma file.

The same layers, names and tokens as the component. Select one to read its size, fill and style.

Layers

024 / Heatmap

chart/024-heatmap

plot · heatmap

Layer: cell mon · 06
Type: Rectangle
Size: 56 × 31
Fill: data/seq-2
Radius: 3
Group: Marks · 84

Layers

024 / Heatmap

chart/024-heatmap

plot · heatmap

Layer: cell mon · 06
Type: Rectangle
Size: 16 × 15
Fill: data/seq-2
Radius: 3
Group: Marks · 84

Sizes

Re-laid out, never scaled.

The same data at XS, S, M and L. Every size is redrawn from the data, so text and line weights never shrink.

M against S

Width360 px480 px

Plot328 px440 px

Labels1414

Marks8484

Height212 px246 px

Same tokens at every size: text styles, 1 px lines and mark radius stay put.

When to use

Patterns across two axes.

Three signs it fits, and three signs another type fits better.

Are there two dimensions?

One value per day.

Yes: Keep the heatmap

No: Use calendar heatmap025

Is the grid rectangular?

Hours around a clock.

Yes: Keep the heatmap

No: Use radial hour heatmap052

Is shading enough?

Sized dots per cell.

Yes: Keep the heatmap

No: Use punch card086

Code and Figma

One name in Figma and in code.

Every Figma property is a prop with the same name and values. One command installs it.

Figma

chart/024-heatmap

size

legend

Property = propValuesDefault

size"xs" · "s" · "m" · "l""xs"

legendtrue · falsetrue

color"cat-1" · "cat-2" · "cat-3" · "cat-4""cat-1"

npx shadcn add @chartory/heatmap

heatmap.tsx

import { Heatmap } from "@/components/chartory/heatmap"import { cardTransactions } from "./card-transactions"export function CardTransactions() {  return (    <Heatmap      data={cardTransactions}      size="m"      legend={true}    />  )}

Hearth widget

The chart in a Hearth card with a hero number and two blocks. One token set, light and dark.

Code

Get the code

EmberPreset

ChartoryDefault preset

Pick the blocks, the size and the preset for your own widget.

Read the Hearth widget docs

FAQ

Heatmap questions.

What people ask before they put a heatmap in a dashboard.

Something else?

hello@usechartory.com

Only the peaks (398 and 412 in the sample). The rest read by shade, from low to high as the legend shows.

Related types

The same question, a different shape of answer. Every type ships in Figma and in code.

Same family

Space and place

9 types in Chartory answer this question.

Heatmap

Inspect it like the Figma file.

Re-laid out, never scaled.

Patterns across two axes.

Are there two dimensions?

Is the grid rectangular?

Is shading enough?

One name in Figma and in code.

Heatmap as a widget.

Heatmap questions.

DataWhich cells carry numbers?

DataWhat are the axes?

CodeWhat data does the component expect?

FigmaHow do I change its colours?

FigmaWhich sizes does it ship in?

CodeDoes it animate when the data changes?

CodeIs it in the Figma kit and the code library?

CodeHow do I install it with my coding agent?

Other ways to show space and place.

Space and place