The sample shows twenty weeks, May to September, one column per week. For a full year of weeks, the spiral year winds 52 weeks into one coil.

How are the shades set?

Along the sequential data ramp, from least to most. The legend under the grid reads Less to More.

What data does the component expect?

One data object in the sample’s shape: one value per day. 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/calendar-heatmap. You review the diff.

Calendar heatmap

Every day of a season in one grid.

Definition · Updated Nov 2, 2026

A calendar heatmap lays days out as weeks and weekdays, then shades each day by its value. Busy weeks, quiet weekends and streaks show up as patterns. Use it for deploys, activity, sales or anything counted per day.

Get Chartory · from $149 Open in Figma Open in

Pay once. Every update included.

Live preview

Production deploys per day
Week	Mon	Tue	Wed	Thu	Fri	Sat	Sun
Week 1	0	3	2	1	0	0	0
Week 2	3	3	3	2	2	0	1
Week 3	3	0	1	1	2	0	0
Week 4	0	0	2	0	4	1	0
Week 5	1	3	2	4	1	0	0
Week 6	3	1	2	2	3	0	0
Week 7	4	2	1	3	1	0	1
Week 8	1	0	1	0	0	0	0
Week 9	4	3	1	0	0	1	0
Week 10	1	1	0	2	3	0	1
Week 11	2	2	0	3	0	1	1
Week 12	2	4	1	1	1	1	0
Week 13	1	0	2	4	4	0	1
Week 14	5	6	2	2	2	0	1
Week 15	5	2	4	6	5	0	1
Week 16	2	6	5	3	4	1	0
Week 17	3	4	6	6	2	1	0
Week 18	5	5	2	2	2	0	0
Week 19	6	3	3	2	3	0	1
Week 20	5	5	5	4	–	–	–

Production deploys per day
Week	Mon	Tue	Wed	Thu	Fri	Sat	Sun
Week 1	0	3	2	1	0	0	0
Week 2	3	3	3	2	2	0	1
Week 3	3	0	1	1	2	0	0
Week 4	0	0	2	0	4	1	0
Week 5	1	3	2	4	1	0	0
Week 6	3	1	2	2	3	0	0
Week 7	4	2	1	3	1	0	1
Week 8	1	0	1	0	0	0	0
Week 9	4	3	1	0	0	1	0
Week 10	1	1	0	2	3	0	1
Week 11	2	2	0	3	0	1	1
Week 12	2	4	1	1	1	1	0
Week 13	1	0	2	4	4	0	1
Week 14	5	6	2	2	2	0	1
Week 15	5	2	4	6	5	0	1
Week 16	2	6	5	3	4	1	0
Week 17	3	4	6	6	2	1	0
Week 18	5	5	2	2	2	0	0
Week 19	6	3	3	2	3	0	1
Week 20	5	5	5	4	–	–	–

Production deploys per day
Week	Mon	Tue	Wed	Thu	Fri	Sat	Sun
Week 1	0	3	2	1	0	0	0
Week 2	3	3	3	2	2	0	1
Week 3	3	0	1	1	2	0	0
Week 4	0	0	2	0	4	1	0
Week 5	1	3	2	4	1	0	0
Week 6	3	1	2	2	3	0	0
Week 7	4	2	1	3	1	0	1
Week 8	1	0	1	0	0	0	0
Week 9	4	3	1	0	0	1	0
Week 10	1	1	0	2	3	0	1
Week 11	2	2	0	3	0	1	1
Week 12	2	4	1	1	1	1	0
Week 13	1	0	2	4	4	0	1
Week 14	5	6	2	2	2	0	1
Week 15	5	2	4	6	5	0	1
Week 16	2	6	5	3	4	1	0
Week 17	3	4	6	6	2	1	0
Week 18	5	5	2	2	2	0	0
Week 19	6	3	3	2	3	0	1
Week 20	5	5	5	4	–	–	–

Sample data: production deploys per day, last 20 weeks, May to September

Size

Data shape: One value per day
Good for: Deploys, activity, daily sales
Avoid when: Readers need the exact number per day
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

025 / Calendar heatmap

chart/025-calendar-heatmap

plot · calendar heatmap

Layer: day 0·1
Type: Rectangle
Size: 32 × 32
Fill: data/seq-3
Radius: 2
Group: Marks · 141

Layers

025 / Calendar heatmap

chart/025-calendar-heatmap

plot · calendar heatmap

Layer: day 0·0
Type: Rectangle
Size: 9 × 9
Fill: data/idle
Radius: 2
Group: Marks · 141

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

Labels1010

Marks141141

Height212 px246 px

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

When to use

Days, as a pattern.

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

Is it one value per day?

Hours inside the day matter.

Yes: Keep the calendar heatmap

No: Use radial hour heatmap052

Is the weekly pattern the point?

Only the trend matters.

Yes: Keep the calendar heatmap

No: Use line chart010

Does it cover a few months?

A full year in one loop.

Yes: Keep the calendar heatmap

No: Use spiral year051

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/025-calendar-heatmap

size

legend

Property = propValuesDefault

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

legendfalsefalse

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

npx shadcn add @chartory/calendar-heatmap

calendar-heatmap.tsx

import { CalendarHeatmap } from "@/components/chartory/calendar-heatmap"import { deploysPerDay } from "./deploys-per-day"export function DeploysPerDay() {  return (    <CalendarHeatmap      data={deploysPerDay}      size="m"      legend={false}    />  )}

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