How do I read the rings?

Hours run around the circle (00, 06, 12, 18) and weekdays run from the inside out, starting with Monday inside.

What are the call-outs?

The peak slot, the quietest slot and the weekend's share of volume.

What data does the component expect?

One data object in the sample’s shape: a value 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/radial-hour-heatmap. You review the diff.

Radial hour heatmap

A week of hours around a clock.

Definition · Updated Nov 2, 2026

A radial hour heatmap wraps the hours of the day around a circle with one ring per weekday, shaded by volume, so daily and weekly rhythm show in one round shape. Use it for deliveries, orders or traffic by hour and day.

Get Chartory · from $149 Open in Figma Open in

Pay once. Every update included.

Live preview

Delivery rhythm
Day	00:00	01:00	02:00	03:00	04:00	05:00	06:00	07:00	08:00	09:00	10:00	11:00	12:00	13:00	14:00	15:00	16:00	17:00	18:00	19:00	20:00	21:00	22:00	23:00
Mon	1%	8%	5%	1%	8%	12%	21%	40%	54%	64%	66%	66%	64%	63%	63%	66%	83%	90%	83%	80%	49%	29%	16%	4%
Tue	2%	1%	7%	3%	1%	1%	16%	33%	58%	66%	80%	65%	66%	60%	71%	75%	77%	83%	90%	83%	62%	33%	19%	6%
Wed	11%	2%	8%	1%	1%	11%	16%	41%	64%	77%	78%	79%	63%	65%	79%	77%	89%	83%	93%	83%	56%	43%	16%	5%
Thu	1%	6%	1%	1%	3%	7%	26%	37%	57%	76%	83%	71%	74%	76%	81%	83%	83%	96%	97%	92%	63%	41%	19%	6%
Fri	1%	1%	1%	7%	1%	15%	22%	40%	61%	74%	88%	78%	75%	66%	74%	82%	90%	96%	96%	89%	66%	44%	21%	15%
Sat	1%	6%	3%	1%	1%	6%	10%	17%	29%	27%	35%	34%	22%	25%	28%	35%	34%	42%	42%	34%	19%	14%	8%	9%
Sun	1%	3%	1%	0%	1%	1%	13%	14%	20%	26%	37%	27%	24%	24%	26%	28%	34%	36%	40%	34%	20%	17%	6%	4%

Delivery rhythm
Day	00:00	01:00	02:00	03:00	04:00	05:00	06:00	07:00	08:00	09:00	10:00	11:00	12:00	13:00	14:00	15:00	16:00	17:00	18:00	19:00	20:00	21:00	22:00	23:00
Mon	1%	8%	5%	1%	8%	12%	21%	40%	54%	64%	66%	66%	64%	63%	63%	66%	83%	90%	83%	80%	49%	29%	16%	4%
Tue	2%	1%	7%	3%	1%	1%	16%	33%	58%	66%	80%	65%	66%	60%	71%	75%	77%	83%	90%	83%	62%	33%	19%	6%
Wed	11%	2%	8%	1%	1%	11%	16%	41%	64%	77%	78%	79%	63%	65%	79%	77%	89%	83%	93%	83%	56%	43%	16%	5%
Thu	1%	6%	1%	1%	3%	7%	26%	37%	57%	76%	83%	71%	74%	76%	81%	83%	83%	96%	97%	92%	63%	41%	19%	6%
Fri	1%	1%	1%	7%	1%	15%	22%	40%	61%	74%	88%	78%	75%	66%	74%	82%	90%	96%	96%	89%	66%	44%	21%	15%
Sat	1%	6%	3%	1%	1%	6%	10%	17%	29%	27%	35%	34%	22%	25%	28%	35%	34%	42%	42%	34%	19%	14%	8%	9%
Sun	1%	3%	1%	0%	1%	1%	13%	14%	20%	26%	37%	27%	24%	24%	26%	28%	34%	36%	40%	34%	20%	17%	6%	4%

Delivery rhythm
Day	00:00	01:00	02:00	03:00	04:00	05:00	06:00	07:00	08:00	09:00	10:00	11:00	12:00	13:00	14:00	15:00	16:00	17:00	18:00	19:00	20:00	21:00	22:00	23:00
Mon	1%	8%	5%	1%	8%	12%	21%	40%	54%	64%	66%	66%	64%	63%	63%	66%	83%	90%	83%	80%	49%	29%	16%	4%
Tue	2%	1%	7%	3%	1%	1%	16%	33%	58%	66%	80%	65%	66%	60%	71%	75%	77%	83%	90%	83%	62%	33%	19%	6%
Wed	11%	2%	8%	1%	1%	11%	16%	41%	64%	77%	78%	79%	63%	65%	79%	77%	89%	83%	93%	83%	56%	43%	16%	5%
Thu	1%	6%	1%	1%	3%	7%	26%	37%	57%	76%	83%	71%	74%	76%	81%	83%	83%	96%	97%	92%	63%	41%	19%	6%
Fri	1%	1%	1%	7%	1%	15%	22%	40%	61%	74%	88%	78%	75%	66%	74%	82%	90%	96%	96%	89%	66%	44%	21%	15%
Sat	1%	6%	3%	1%	1%	6%	10%	17%	29%	27%	35%	34%	22%	25%	28%	35%	34%	42%	42%	34%	19%	14%	8%	9%
Sun	1%	3%	1%	0%	1%	1%	13%	14%	20%	26%	37%	27%	24%	24%	26%	28%	34%	36%	40%	34%	20%	17%	6%	4%

Sample data: deliveries over 4 weeks by weekday and hour, peak slot Thu 18:00

Size

Legend

Data shape: A value per weekday and hour
Good for: Deliveries, orders, traffic by hour
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

052 / Radial hour heatmap

chart/052-radial-heat-deliveries

plot · radial heatmap

Layer: cell · d0 h6
Type: Ellipse
Size: 92 × 92
Fill: data/seq-2
Group: Marks · 168

Layers

052 / Radial hour heatmap

chart/052-radial-heat-deliveries

plot · radial heatmap

Layer: cell · d0 h6
Type: Ellipse
Size: 45 × 45
Fill: data/seq-2
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

Labels1213

Marks168168

Height212 px246 px

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

When to use

The rhythm of a week.

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

Is a round shape wanted?

A plain grid.

Yes: Keep the radial hour heatmap

No: Use heatmap024

Is it hours and weekdays?

Days over months.

Yes: Keep the radial hour heatmap

No: Use calendar heatmap025

Is shading enough?

Dots sized by value.

Yes: Keep the radial hour 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/052-radial-heat-deliveries

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/radial-hour-heatmap

radial-hour-heatmap.tsx

import { RadialHourHeatmap } from "@/components/chartory/radial-hour-heatmap"import { deliverySlots } from "./delivery-slots"export function DeliverySlots() {  return (    <RadialHourHeatmap      data={deliverySlots}      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