Heatmap Grid
Map values to color intensity across a grid.
Preview
Import
import { HeatmapGrid } from "@sigil-ui/components";Usage
<HeatmapGrid
xLabels={["Mon", "Tue", "Wed", "Thu", "Fri"]}
yLabels={["9am", "12pm", "3pm", "6pm"]}
data={[
[{ value: 2 }, { value: 5 }, { value: 8 }, { value: 3 }, { value: 1 }],
[{ value: 7 }, { value: 9 }, { value: 4 }, { value: 6 }, { value: 3 }],
[{ value: 4 }, { value: 3 }, { value: 6 }, { value: 8 }, { value: 5 }],
[{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 7 }],
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | HeatmapCell[][] | — | — |
xLabels | string[] | — | — |
yLabels | string[] | — | — |
min | number | — | Minimum value (maps to lowest intensity). |
max | number | — | Maximum value (maps to highest intensity). |
color | string | var(--s-primary) | Color for the high-intensity end. |
cellSize | number | 40 | Cell size in px. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-font-mono | Font mono |
--s-text-muted | Text muted |
--s-radius-sm | Radius sm |
--s-primary-contrast | Primary contrast |