Radial hour heatmap

A week of hours around a clock. Sample data: deliveries over 4 weeks by weekday and hour, peak slot Thu 18:00.

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%

Installation

1
Set up the registry once
This chart is free in Hearth and MIT licensed: no token. Add @chartory to components.json once (the URL alone, no headers), or skip this when another chart is already installed.
Installation guide
2
Add the chart
One command adds the Radial hour heatmap component to your project.
```
npx shadcn add @chartory/radial-hour-heatmap
```

Use it

Pass your rows. The props are the Figma properties.

usage.tsx

import { RadialHourHeatmap }  from "@/components/chartory/radial-hour-heatmap"<RadialHourHeatmap  data={deliverySlots}  size="m"  legend/>

Props

<RadialHourHeatmap>

Every prop but data is a Figma property with the same name and values.

PropTypeDefault

dataRadialHourHeatmapDataRequired

size"xs" | "s" | "m" | "l""m"

legendbooleantrue

RadialHourHeatmapData

The data prop: one object for the whole chart.

PropTypeDefault

valsnumber[][]Required

center[string, string, string][]Required

rowsRadialHourHeatmapRow[]Required

RadialHourHeatmapRow

One object per entry in rows.

PropTypeDefault

labelstringRequired

textstringRequired

pct?string—

tok?string—

tone?string—

h?number—

The data as a JSON Schema: schemas/radial-hour-heatmap.json

Radial hour heatmap: a React and Figma chart in four sizes

What does a radial hour heatmap show?

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.

Chartory ships it as a Figma component and a React component with the same name. The code installs from the shadcn registry with one command and lands in your project as a file you own.

What is the Radial hour heatmap component?

It is one <RadialHourHeatmap> component. Its props are the Figma properties with the same names and values, and the props table above lists them. The data is a value per weekday and hour.

Sizes XS, S, M and L re-lay the chart out from the data instead of scaling it, so labels stay readable at every size.

When should I use it?

Is a round shape wanted? Yes means the radial hour heatmap fits.
Is it hours and weekdays? Yes means the radial hour heatmap fits.
Is shading enough? Yes means the radial hour heatmap fits.

When does another type fit better?

A plain grid. Use Heatmap instead.
Days over months. Use Calendar heatmap instead.
Dots sized by value. Use Punch card instead.

Radial hour heatmap questions

Installing, data, Figma and plans.

Yes. It installs through the shadcn registry with the shadcn CLI, and the file lands in your project.

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%

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%

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%

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%

Radial hour heatmap

Installation

Set up the registry once

Add the chart

Use it

Props

<RadialHourHeatmap>

RadialHourHeatmapData

RadialHourHeatmapRow

Radial hour heatmap: a React and Figma chart in four sizes

What does a radial hour heatmap show?

What is the Radial hour heatmap component?

When should I use it?

When does another type fit better?

Radial hour heatmap questions

Does the Radial hour heatmap chart work with shadcn/ui?Install

How do I install it?Install

Can my coding agent install it?Install

What data does it expect?Data

Which sizes does it ship in?Figma

Is it in the Figma file too?Figma

Does it follow light and dark mode?Figma

Which plan has the code?Plans

New charts, by email.

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%

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%