Heatmap
A daily activity field with every date and reading available as text.
Live — this one is real
- 2026-07-01: 0
- 2026-07-02: 7
- 2026-07-03: 3
- 2026-07-04: 10
- 2026-07-05: 6
- 2026-07-06: 2
- 2026-07-07: 9
- 2026-07-08: 5
- 2026-07-09: 1
- 2026-07-10: 8
- 2026-07-11: 4
- 2026-07-12: 0
- 2026-07-13: 7
- 2026-07-14: 3
- 2026-07-15: 10
- 2026-07-16: 6
- 2026-07-17: 2
- 2026-07-18: 9
- 2026-07-19: 5
- 2026-07-20: 1
- 2026-07-21: 8
- 2026-07-22: 4
- 2026-07-23: 0
- 2026-07-24: 7
- 2026-07-25: 3
- 2026-07-26: 10
- 2026-07-27: 6
- 2026-07-28: 2
- 2026-08-01: 9
- 2026-08-02: 5
- 2026-08-03: 1
- 2026-08-04: 8
- 2026-08-05: 4
- 2026-08-06: 0
- 2026-08-07: 7
- 2026-08-08: 3
- 2026-08-09: 10
- 2026-08-10: 6
- 2026-08-11: 2
- 2026-08-12: 9
- 2026-08-13: 5
- 2026-08-14: 1
- 2026-08-15: 8
- 2026-08-16: 4
- 2026-08-17: 0
- 2026-08-18: 7
- 2026-08-19: 3
- 2026-08-20: 10
- 2026-08-21: 6
- 2026-08-22: 2
- 2026-08-23: 9
- 2026-08-24: 5
- 2026-08-25: 1
- 2026-08-26: 8
- 2026-08-27: 4
- 2026-08-28: 0
- 2026-09-01: 7
- 2026-09-02: 3
- 2026-09-03: 10
- 2026-09-04: 6
- 2026-09-05: 2
- 2026-09-06: 9
- 2026-09-07: 5
- 2026-09-08: 1
- 2026-09-09: 8
- 2026-09-10: 4
- 2026-09-11: 0
- 2026-09-12: 7
- 2026-09-13: 3
- 2026-09-14: 10
Each square is one day. Intensity follows the recorded value.
Usage
import { Heatmap } from "mizu-ui";
export function Example() {
const data = Array.from({ length: 70 }, (_, i) => ({
date: `2026-${String(Math.floor(i / 28) + 7).padStart(2, "0")}-${String((i % 28) + 1).padStart(2, "0")}`,
value: (i * 7) % 11,
}));
return <Heatmap label="Illustrative workshop activity" data={data} />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect data/Charts.tsx
Source is included in the npm package under src/data/Charts.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | {date: string; value: number}[] | — | Days in chronological order; supply missing days as zero. |
| label | string | — | Figure caption. |
Accessibility
Each square includes its date/value as screen-reader text. The full grid scrolls on narrow screens; color is never the only source of data.
Motion
Static CSS grid.