Data

Heatmap

semantic HTML

Intensity visualization across two categorical dimensions.

stablefreeSince 0.1.5

Live example

Editor activity by day and time
Morning	12, 18, 22, 15, 20
Afternoon	24, 31, 28, 34, 29
Evening	8, 12, 10, 15, 13

<div data-standard-component="heatmap" label="Editor activity" data='{"xLabels":["Mon","Tue","Wed","Thu","Fri"],"yLabels":["Morning","Afternoon","Evening"],"values":[[12,18,22,15,20],[24,31,28,34,29],[8,12,10,15,13]],"max":40}'><table><caption>Editor activity by day and time</caption><tbody><tr><th>Morning</th><td>12, 18, 22, 15, 20</td></tr><tr><th>Afternoon</th><td>24, 31, 28, 34, 29</td></tr><tr><th>Evening</th><td>8, 12, 10, 15, 13</td></tr></tbody></table></div>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.1.5`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

ECharts SVG visualization with an accessible SSR data-table fallback.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->