What does dot size mean?

The number of calls in that hour; the legend names calls and peak hours.

Dots make the peaks pop; shading in a heatmap reads better when many cells are close.

What data does the component expect?

One data object in the sample’s shape: a count per weekday and hour. 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/punch-card. You review the diff.

Punch card

Activity by weekday and hour, as sized dots.

Definition · Updated Nov 2, 2026

A punch card puts weekdays down the side and hours across, and draws a dot in each cell sized by activity. Peak hours stand out as the biggest dots. Use it for API calls, commits or support load by time of week.

Get Chartory · from $149 Open in Figma Open in

Pay once. Every update included.

Live preview

API calls by hour
Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

API calls by hour
Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

API calls by hour
Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Sample data: API calls by weekday and hour, Monday to Sunday, 00 to 23

Size

Legend

Data shape: A count per weekday and hour
Good for: API calls, commits, support load
Avoid when: Exact values per cell matter
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

086 / Punch card

chart/086-punch-card-api

plot · punch card

Layer: punch
Type: Ellipse
Size: 20 × 20
Fill: data/primary
Group: Marks · 168

Layers

086 / Punch card

chart/086-punch-card-api

plot · punch card

Layer: punch
Type: Ellipse
Size: 2 × 2
Fill: data/primary-soft
Group: Marks · 168

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

Labels1212

Marks168168

Height212 px246 px

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

When to use

When the load comes.

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

Are dot sizes enough?

Shaded cells.

Yes: Keep the punch card

No: Use heatmap024

Is a grid wanted?

A round week.

Yes: Keep the punch card

No: Use radial hour heatmap052

Is it counts, not runs?

A week of runs with a now marker.

Yes: Keep the punch card

No: Use weekly rhythm103

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/086-punch-card-api

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/punch-card

punch-card.tsx

import { PunchCard } from "@/components/chartory/punch-card"import { apiCalls } from "./api-calls"export function ApiCalls() {  return (    <PunchCard      data={apiCalls}      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

Punch card questions.

What people ask before they put a punch card in a dashboard.

Something else?

hello@usechartory.com

The number of calls in that hour; the legend names calls and peak hours.

Related types

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

Same family

Schedule and status

19 types in Chartory answer this question.

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Punch card

Inspect it like the Figma file.

Re-laid out, never scaled.

When the load comes.

Are dot sizes enough?

Is a grid wanted?

Is it counts, not runs?

One name in Figma and in code.

Punch card as a widget.

Punch card questions.

DataWhat does dot size mean?

DataDots or shading?

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 schedule and status.

Schedule and status

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4

Day	00	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19	20	21	22	23
MON	9	7	5	5	7	10	31	52	89	113	102	78	73	69	111	103	80	59	54	36	25	21	16	13
TUE	9	7	4	4	7	14	35	62	78	98	115	93	71	74	107	104	91	84	45	37	29	22	22	13
WED	9	6	4	4	7	10	31	49	94	85	116	94	71	76	85	100	78	72	59	37	32	26	20	14
THU	9	5	4	4	6	14	31	55	90	91	82	74	79	72	95	108	87	74	52	43	27	21	21	14
FRI	9	7	4	3	5	12	30	54	74	77	102	92	82	76	100	107	89	62	55	39	30	28	18	14
SAT	3	2	1	1	2	4	9	20	25	36	30	38	28	26	30	34	26	23	18	15	12	10	7	4
SUN	4	2	1	1	2	4	11	15	30	28	34	38	30	27	28	35	35	25	18	12	12	9	5	4