HeatStrip
React heat strip chart — ordered intensity along a single strip for dense series. Tiny accessible SVG microchart; RSC-safe static or /interactive.
HeatStrip answers "how did intensity evolve, glanceably?". It is the 1×N sibling of ActivityGrid: the same discrete step scale, the same cell vocabulary, laid on a single timeline. Empty is not zero — a slot with no record renders a hairline outline, visibly different from a low value.
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
- Good for — per-tenant load rows, intensity ribbons in dense tables.
- Avoid for — exact shape (Sparkline) or weekday rhythm (ActivityGrid).
Sizing
Variants
Edge cases
Four homes
Why this default
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); the faint track look is reserved for truly-empty slots. Three ways a heat strip
lies — continuous ramps, per-row autoscale, mean-based downsampling — are all closed: discrete steps, shared domain,
max-per-bucket only.
Accessibility
The summary reuses describeSeries verbatim — for the load strip above that's "Trending up 383%. Range 12 to 88. Last
value 58." — so 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.