Heatmap
Activity by day, or by hour and weekday, as a grid of cells whose depth of colour is the value. Hover a cell for the exact number.
Orders per day
LessMore
<figure class="mn-chart" style="max-width:34rem">
<ul class="mn-heatmap" role="img" aria-label="Orders per day over 26 weeks: weekdays are busiest, and volume grows in the last eight weeks"><li style="--v:0.00" data-tip="Mon 1 Jun · 0 orders"></li><li style="--v:0.17" data-tip="Tue 2 Jun · 7 orders"></li><li style="--v:0.30" data-tip="Wed 3 Jun · 12 orders"></li><li style="--v:0.45" data-tip="Thu 4 Jun · 18 orders"></li><li style="--v:0.25" data-tip="Fri 5 Jun · 10 orders"></li><li style="--v:0.17" data-tip="Sat 6 Jun · 7 orders"></li><li style="--v:0.10" data-tip="Sun 7 Jun · 4 orders"></li><li style="--v:0.13" data-tip="Mon 8 Jun · 5 orders"></li><li style="--v:0.78" data-tip="Tue 9 Jun · 31 orders"></li><li style="--v:0.63" data-tip="Wed 10 Jun · 25 orders"></li><li style="--v:0.15" data-tip="Thu 11 Jun · 6 orders"></li><li style="--v:0.05" data-tip="Fri 12 Jun · 2 orders"></li><li style="--v:0.05" data-tip="Sat 13 Jun · 2 orders"></li><li style="--v:0.13" data-tip="Sun 14 Jun · 5 orders"></li><li style="--v:0.03" data-tip="Mon 15 Jun · 1 order"></li><li style="--v:0.25" data-tip="Tue 16 Jun · 10 orders"></li><li style="--v:0.05" data-tip="Wed 17 Jun · 2 orders"></li><li style="--v:0.28" data-tip="Thu 18 Jun · 11 orders"></li><li style="--v:0.10" data-tip="Fri 19 Jun · 4 orders"></li><li style="--v:0.03" data-tip="Sat 20 Jun · 1 order"></li><li style="--v:0.05" data-tip="Sun 21 Jun · 2 orders"></li><li style="--v:0.25" data-tip="Mon 22 Jun · 10 orders"></li><li style="--v:0.68" data-tip="Tue 23 Jun · 27 orders"></li><li style="--v:0.33" data-tip="Wed 24 Jun · 13 orders"></li><li style="--v:0.45" data-tip="Thu 25 Jun · 18 orders"></li><li style="--v:0.17" data-tip="Fri 26 Jun · 7 orders"></li><li style="--v:0.05" data-tip="Sat 27 Jun · 2 orders"></li><li style="--v:0.03" data-tip="Sun 28 Jun · 1 order"></li><li style="--v:0.05" data-tip="Mon 29 Jun · 2 orders"></li><li style="--v:0.10" data-tip="Tue 30 Jun · 4 orders"></li><li style="--v:0.10" data-tip="Wed 1 Jul · 4 orders"></li><li style="--v:0.10" data-tip="Thu 2 Jul · 4 orders"></li><li style="--v:0.95" data-tip="Fri 3 Jul · 38 orders"></li><li style="--v:0.23" data-tip="Sat 4 Jul · 9 orders"></li><li style="--v:0.00" data-tip="Sun 5 Jul · 0 orders"></li><li style="--v:0.00" data-tip="Mon 6 Jul · 0 orders"></li><li style="--v:0.45" data-tip="Tue 7 Jul · 18 orders"></li><li style="--v:0.25" data-tip="Wed 8 Jul · 10 orders"></li><li style="--v:0.40" data-tip="Thu 9 Jul · 16 orders"></li><li style="--v:0.00" data-tip="Fri 10 Jul · 0 orders"></li><li style="--v:0.20" data-tip="Sat 11 Jul · 8 orders"></li><li style="--v:0.05" data-tip="Sun 12 Jul · 2 orders"></li><li style="--v:0.47" data-tip="Mon 13 Jul · 19 orders"></li><li style="--v:0.05" data-tip="Tue 14 Jul · 2 orders"></li><li style="--v:0.05" data-tip="Wed 15 Jul · 2 orders"></li><li style="--v:0.42" data-tip="Thu 16 Jul · 17 orders"></li><li style="--v:0.13" data-tip="Fri 17 Jul · 5 orders"></li><li style="--v:0.20" data-tip="Sat 18 Jul · 8 orders"></li><li style="--v:0.25" data-tip="Sun 19 Jul · 10 orders"></li><li style="--v:0.88" data-tip="Mon 20 Jul · 35 orders"></li><li style="--v:0.23" data-tip="Tue 21 Jul · 9 orders"></li><li style="--v:0.13" data-tip="Wed 22 Jul · 5 orders"></li><li style="--v:0.60" data-tip="Thu 23 Jul · 24 orders"></li><li style="--v:0.55" data-tip="Fri 24 Jul · 22 orders"></li><li style="--v:0.10" data-tip="Sat 25 Jul · 4 orders"></li><li style="--v:0.10" data-tip="Sun 26 Jul · 4 orders"></li><li style="--v:0.68" data-tip="Mon 27 Jul · 27 orders"></li><li style="--v:0.15" data-tip="Tue 28 Jul · 6 orders"></li><li style="--v:0.33" data-tip="Wed 29 Jul · 13 orders"></li><li style="--v:0.55" data-tip="Thu 30 Jul · 22 orders"></li><li style="--v:0.10" data-tip="Fri 31 Jul · 4 orders"></li><li style="--v:0.10" data-tip="Sat 1 Aug · 4 orders"></li><li style="--v:0.10" data-tip="Sun 2 Aug · 4 orders"></li><li style="--v:0.00" data-tip="Mon 3 Aug · 0 orders"></li><li style="--v:0.17" data-tip="Tue 4 Aug · 7 orders"></li><li style="--v:0.20" data-tip="Wed 5 Aug · 8 orders"></li><li style="--v:0.07" data-tip="Thu 6 Aug · 3 orders"></li><li style="--v:1.00" data-tip="Fri 7 Aug · 40 orders"></li><li style="--v:0.00" data-tip="Sat 8 Aug · 0 orders"></li><li style="--v:0.15" data-tip="Sun 9 Aug · 6 orders"></li><li style="--v:0.00" data-tip="Mon 10 Aug · 0 orders"></li><li style="--v:0.00" data-tip="Tue 11 Aug · 0 orders"></li><li style="--v:0.70" data-tip="Wed 12 Aug · 28 orders"></li><li style="--v:0.03" data-tip="Thu 13 Aug · 1 order"></li><li style="--v:0.13" data-tip="Fri 14 Aug · 5 orders"></li><li style="--v:0.10" data-tip="Sat 15 Aug · 4 orders"></li><li style="--v:0.05" data-tip="Sun 16 Aug · 2 orders"></li><li style="--v:0.23" data-tip="Mon 17 Aug · 9 orders"></li><li style="--v:0.17" data-tip="Tue 18 Aug · 7 orders"></li><li style="--v:0.03" data-tip="Wed 19 Aug · 1 order"></li><li style="--v:0.03" data-tip="Thu 20 Aug · 1 order"></li><li style="--v:0.42" data-tip="Fri 21 Aug · 17 orders"></li><li style="--v:0.03" data-tip="Sat 22 Aug · 1 order"></li><li style="--v:0.00" data-tip="Sun 23 Aug · 0 orders"></li><li style="--v:0.05" data-tip="Mon 24 Aug · 2 orders"></li><li style="--v:0.88" data-tip="Tue 25 Aug · 35 orders"></li><li style="--v:0.45" data-tip="Wed 26 Aug · 18 orders"></li><li style="--v:0.65" data-tip="Thu 27 Aug · 26 orders"></li><li style="--v:0.17" data-tip="Fri 28 Aug · 7 orders"></li><li style="--v:0.10" data-tip="Sat 29 Aug · 4 orders"></li><li style="--v:0.15" data-tip="Sun 30 Aug · 6 orders"></li><li style="--v:0.90" data-tip="Mon 31 Aug · 36 orders"></li><li style="--v:0.25" data-tip="Tue 1 Sep · 10 orders"></li><li style="--v:0.42" data-tip="Wed 2 Sep · 17 orders"></li><li style="--v:0.38" data-tip="Thu 3 Sep · 15 orders"></li><li style="--v:0.85" data-tip="Fri 4 Sep · 34 orders"></li><li style="--v:0.03" data-tip="Sat 5 Sep · 1 order"></li><li style="--v:0.03" data-tip="Sun 6 Sep · 1 order"></li><li style="--v:0.55" data-tip="Mon 7 Sep · 22 orders"></li><li style="--v:0.47" data-tip="Tue 8 Sep · 19 orders"></li><li style="--v:0.28" data-tip="Wed 9 Sep · 11 orders"></li><li style="--v:0.20" data-tip="Thu 10 Sep · 8 orders"></li><li style="--v:0.17" data-tip="Fri 11 Sep · 7 orders"></li><li style="--v:0.10" data-tip="Sat 12 Sep · 4 orders"></li><li style="--v:0.03" data-tip="Sun 13 Sep · 1 order"></li><li style="--v:0.00" data-tip="Mon 14 Sep · 0 orders"></li><li style="--v:0.00" data-tip="Tue 15 Sep · 0 orders"></li><li style="--v:0.20" data-tip="Wed 16 Sep · 8 orders"></li><li style="--v:0.80" data-tip="Thu 17 Sep · 32 orders"></li><li style="--v:0.10" data-tip="Fri 18 Sep · 4 orders"></li><li style="--v:0.15" data-tip="Sat 19 Sep · 6 orders"></li><li style="--v:0.03" data-tip="Sun 20 Sep · 1 order"></li><li style="--v:0.63" data-tip="Mon 21 Sep · 25 orders"></li><li style="--v:0.65" data-tip="Tue 22 Sep · 26 orders"></li><li style="--v:0.07" data-tip="Wed 23 Sep · 3 orders"></li><li style="--v:0.17" data-tip="Thu 24 Sep · 7 orders"></li><li style="--v:0.07" data-tip="Fri 25 Sep · 3 orders"></li><li style="--v:0.17" data-tip="Sat 26 Sep · 7 orders"></li><li style="--v:0.03" data-tip="Sun 27 Sep · 1 order"></li><li style="--v:0.40" data-tip="Mon 28 Sep · 16 orders"></li><li style="--v:0.10" data-tip="Tue 29 Sep · 4 orders"></li><li style="--v:0.50" data-tip="Wed 30 Sep · 20 orders"></li><li style="--v:0.82" data-tip="Thu 1 Oct · 33 orders"></li><li style="--v:0.95" data-tip="Fri 2 Oct · 38 orders"></li><li style="--v:0.03" data-tip="Sat 3 Oct · 1 order"></li><li style="--v:0.30" data-tip="Sun 4 Oct · 12 orders"></li><li style="--v:0.03" data-tip="Mon 5 Oct · 1 order"></li><li style="--v:1.00" data-tip="Tue 6 Oct · 40 orders"></li><li style="--v:0.00" data-tip="Wed 7 Oct · 0 orders"></li><li style="--v:0.10" data-tip="Thu 8 Oct · 4 orders"></li><li style="--v:0.13" data-tip="Fri 9 Oct · 5 orders"></li><li style="--v:0.10" data-tip="Sat 10 Oct · 4 orders"></li><li style="--v:0.23" data-tip="Sun 11 Oct · 9 orders"></li><li style="--v:0.50" data-tip="Mon 12 Oct · 20 orders"></li><li style="--v:0.82" data-tip="Tue 13 Oct · 33 orders"></li><li style="--v:0.93" data-tip="Wed 14 Oct · 37 orders"></li><li style="--v:0.17" data-tip="Thu 15 Oct · 7 orders"></li><li style="--v:0.63" data-tip="Fri 16 Oct · 25 orders"></li><li style="--v:0.15" data-tip="Sat 17 Oct · 6 orders"></li><li style="--v:0.03" data-tip="Sun 18 Oct · 1 order"></li><li style="--v:0.17" data-tip="Mon 19 Oct · 7 orders"></li><li style="--v:0.10" data-tip="Tue 20 Oct · 4 orders"></li><li style="--v:0.13" data-tip="Wed 21 Oct · 5 orders"></li><li style="--v:0.10" data-tip="Thu 22 Oct · 4 orders"></li><li style="--v:0.55" data-tip="Fri 23 Oct · 22 orders"></li><li style="--v:0.03" data-tip="Sat 24 Oct · 1 order"></li><li style="--v:0.10" data-tip="Sun 25 Oct · 4 orders"></li><li style="--v:0.28" data-tip="Mon 26 Oct · 11 orders"></li><li style="--v:0.38" data-tip="Tue 27 Oct · 15 orders"></li><li style="--v:0.23" data-tip="Wed 28 Oct · 9 orders"></li><li style="--v:0.40" data-tip="Thu 29 Oct · 16 orders"></li><li style="--v:0.55" data-tip="Fri 30 Oct · 22 orders"></li><li style="--v:0.33" data-tip="Sat 31 Oct · 13 orders"></li><li style="--v:0.28" data-tip="Sun 1 Nov · 11 orders"></li><li style="--v:0.40" data-tip="Mon 2 Nov · 16 orders"></li><li style="--v:0.28" data-tip="Tue 3 Nov · 11 orders"></li><li style="--v:0.57" data-tip="Wed 4 Nov · 23 orders"></li><li style="--v:0.07" data-tip="Thu 5 Nov · 3 orders"></li><li style="--v:0.10" data-tip="Fri 6 Nov · 4 orders"></li><li style="--v:0.30" data-tip="Sat 7 Nov · 12 orders"></li><li style="--v:0.28" data-tip="Sun 8 Nov · 11 orders"></li><li style="--v:0.38" data-tip="Mon 9 Nov · 15 orders"></li><li style="--v:0.57" data-tip="Tue 10 Nov · 23 orders"></li><li style="--v:0.28" data-tip="Wed 11 Nov · 11 orders"></li><li style="--v:0.70" data-tip="Thu 12 Nov · 28 orders"></li><li style="--v:0.28" data-tip="Fri 13 Nov · 11 orders"></li><li style="--v:0.23" data-tip="Sat 14 Nov · 9 orders"></li><li style="--v:0.20" data-tip="Sun 15 Nov · 8 orders"></li><li style="--v:0.15" data-tip="Mon 16 Nov · 6 orders"></li><li style="--v:0.15" data-tip="Tue 17 Nov · 6 orders"></li><li style="--v:0.75" data-tip="Wed 18 Nov · 30 orders"></li><li style="--v:0.17" data-tip="Thu 19 Nov · 7 orders"></li><li style="--v:0.07" data-tip="Fri 20 Nov · 3 orders"></li><li style="--v:0.10" data-tip="Sat 21 Nov · 4 orders"></li><li style="--v:0.07" data-tip="Sun 22 Nov · 3 orders"></li><li style="--v:0.33" data-tip="Mon 23 Nov · 13 orders"></li><li style="--v:0.10" data-tip="Tue 24 Nov · 4 orders"></li><li style="--v:0.23" data-tip="Wed 25 Nov · 9 orders"></li><li style="--v:0.80" data-tip="Thu 26 Nov · 32 orders"></li><li style="--v:0.72" data-tip="Fri 27 Nov · 29 orders"></li><li style="--v:0.28" data-tip="Sat 28 Nov · 11 orders"></li><li style="--v:0.23" data-tip="Sun 29 Nov · 9 orders"></li></ul>
<p class="mn-heatmap-legend"><span>Less</span><i style="--v:0"></i><i style="--v:.25"></i><i style="--v:.5"></i><i style="--v:.75"></i><i style="--v:1"></i><span>More</span></p>
<figcaption>1 June – 29 November 2026. Each column is a week, Monday at the top.</figcaption>
</figure>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/heatmap.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-heatmap | On a <ul>: seven rows (Monday to Sunday), one column per week. Scrolls sideways when it does not fit. |
| --v | On each cell: the value from 0 to 1. |
| data-tip | On each cell: the text shown on hover (“Tue 14 Jul · 18 orders”). |
| mn-heatmap-hours | Rows of equal cells instead: set --cols (default 24) for an hour-by-weekday grid. |
| mn-heatmap-legend | A “less … more” key built from the same cells. |
| --cell · --gap | Cell size and spacing. |
Accessibility
- Colour depth alone is not readable by everyone: give the grid role="img" and an aria-label that states the finding (“Busiest on Tuesdays and Thursdays”).
- Offer the numbers as a table or a download for anyone who needs the exact values.
- A colour role (mn-success, mn-accent…) on the list changes the hue.