Heatmaps
Summarize activity intensity using a labelled grid of colored cells.
Live preview
HTML
<figure class="xsh-heatmap">
<div aria-label="Sample activity over two weeks" class="xsh-heatmap__grid">
<span title="Day 1: 0 events" aria-label="Day 1, 0 events" style="--xsh-level:0">
</span>
<span title="Day 2: 2 events" aria-label="Day 2, 2 events" style="--xsh-level:2">
</span>
<span title="Day 3: 4 events" aria-label="Day 3, 4 events" style="--xsh-level:4">
</span>
<span title="Day 4: 1 events" aria-label="Day 4, 1 events" style="--xsh-level:1">
</span>
<span title="Day 5: 3 events" aria-label="Day 5, 3 events" style="--xsh-level:3">
</span>
<span title="Day 6: 0 events" aria-label="Day 6, 0 events" style="--xsh-level:0">
</span>
<span title="Day 7: 2 events" aria-label="Day 7, 2 events" style="--xsh-level:2">
</span>
<span title="Day 8: 4 events" aria-label="Day 8, 4 events" style="--xsh-level:4">
</span>
<span title="Day 9: 1 events" aria-label="Day 9, 1 events" style="--xsh-level:1">
</span>
<span title="Day 10: 3 events" aria-label="Day 10, 3 events" style="--xsh-level:3">
</span>
<span title="Day 11: 0 events" aria-label="Day 11, 0 events" style="--xsh-level:0">
</span>
<span title="Day 12: 2 events" aria-label="Day 12, 2 events" style="--xsh-level:2">
</span>
<span title="Day 13: 4 events" aria-label="Day 13, 4 events" style="--xsh-level:4">
</span>
<span title="Day 14: 1 events" aria-label="Day 14, 1 events" style="--xsh-level:1">
</span>
<span title="Day 15: 3 events" aria-label="Day 15, 3 events" style="--xsh-level:3">
</span>
<span title="Day 16: 0 events" aria-label="Day 16, 0 events" style="--xsh-level:0">
</span>
<span title="Day 17: 2 events" aria-label="Day 17, 2 events" style="--xsh-level:2">
</span>
<span title="Day 18: 4 events" aria-label="Day 18, 4 events" style="--xsh-level:4">
</span>
<span title="Day 19: 1 events" aria-label="Day 19, 1 events" style="--xsh-level:1">
</span>
<span title="Day 20: 3 events" aria-label="Day 20, 3 events" style="--xsh-level:3">
</span>
<span title="Day 21: 0 events" aria-label="Day 21, 0 events" style="--xsh-level:0">
</span>
<span title="Day 22: 2 events" aria-label="Day 22, 2 events" style="--xsh-level:2">
</span>
<span title="Day 23: 4 events" aria-label="Day 23, 4 events" style="--xsh-level:4">
</span>
<span title="Day 24: 1 events" aria-label="Day 24, 1 events" style="--xsh-level:1">
</span>
<span title="Day 25: 3 events" aria-label="Day 25, 3 events" style="--xsh-level:3">
</span>
<span title="Day 26: 0 events" aria-label="Day 26, 0 events" style="--xsh-level:0">
</span>
<span title="Day 27: 2 events" aria-label="Day 27, 2 events" style="--xsh-level:2">
</span>
<span title="Day 28: 4 events" aria-label="Day 28, 4 events" style="--xsh-level:4">
</span>
</div>
<figcaption>Sample activity over four weeks · intensity 0–4</figcaption>
</figure>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
xsh-heatmap | Used by the example markup and component styles or behavior. |
xsh-heatmap__grid | Used by the example markup and component styles or behavior. |
--xsh-level | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Every cell has an individual accessible name and tooltip title.
Implementation note. Color intensity is supplemental to textual counts and a legend in production.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.