# Heatmap · MIAN
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.
- Id: `heatmap` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/heatmap
- Use for: activity heatmap, calendar heatmap, contribution graph, busiest days, usage by hour.
- Alternatives: chart.
Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.
## Install
```html
```
## Classes
- `mn-heatmap`: On a
: 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.
## Examples
### Orders per day
```html
LessMore
1 June – 29 November 2026. Each column is a week, Monday at the top.
```
## Source
Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/heatmap/source