HeatStrip
HeatStrip lays ActivityGrid's discrete intensity steps along a single timeline row.
- encodes
- discrete color step per time cell
- precision
- low — Sparkline when shape matters
- nodes
- 1 per cell (≤ 60 documented)
HeatStrip prints one stepped intensity cell per point along a single timeline: it is the 1×N sibling of ActivityGrid, with the same discrete step scale and the same cell vocabulary. A slot with no record renders a hairline outline, visibly different from a low value, because empty is not zero.
Square cells with a density-adaptive gap keep boundaries legible where round shapes blur at 10 px. Every real value
renders at a visible opacity (0.25–1), and the faint track look is reserved for empty slots. The steps stay discrete,
the domain is shared rather than autoscaled per row, and downsampling takes the max per bucket rather than the mean.
Install
import { HeatStrip } from "@microcharts/react/heat-strip";// hourlyLoad — real values under “Sample data” below<HeatStrip data={hourlyLoad} domain={[0, 100]} title="Load per hour" />Sample data
const hourlyLoad = [12, 25, 38, 52, 66, 79, 88, 90, 84, 71, 55, 40, 28, 45, 62, 78, 85, 74, 58, 35];Try it
When to use it
Use it for per-tenant load rows and intensity ribbons in dense tables. For exact shape use Sparkline; for weekday rhythm, ActivityGrid.
Sizing
Variants
Edge cases
A null holds its slot as a hairline outline instead of collapsing the strip, so positions stay aligned across stacked
rows.
Four homes
Accessibility
The summary reuses describeSeries verbatim: for the load strip above that is "Trending up 383%. Range 12 to 88. Last
value 58." A color ramp is never the only channel. The interactive entry roves cells with ActivityGrid-parity
announcements ("Point 8 of 20: 90.", empty slots as "no data").
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | (number | null)[] | Time-ordered values; null = no record (≠ zero). |
| steps | number | Shared step-scale granularity (default 5). |
| shape | "square" | "round" | "dot" | Shared cell vocabulary. |
| domain | [number, number] | Cross-row calibration — share one domain per table. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.