React coverage strip chart — what fraction of a range is covered, as a compact strip. Tiny accessible SVG microchart; RSC-safe static or /interactive.

CoverageStrip answers "can I trust this data — where was nothing measured?". Measured slots are filled; gaps are hollow with a hairline outline. The distinction between null (no measurement) and 0 (a measured zero) is the whole chart, and it is carried by shape, so it survives forced-colors and print. Nothing is ever interpolated across a gap.

CoverageStrip

interactive · 4.7 kB · static · 2.44 kB

Install

Import & usereact/coverage-strip

import { CoverageStrip } from "@microcharts/react/coverage-strip";// readings — real values under “Sample data” below<CoverageStrip data={readings} expected={18} label="percent" title="Sensor uptime" />

Sample data

// null = no measurement, 0 = a measured zeroconst readings = [3, 4, null, 5, 0, null, null, 6, 8, 7, null, 9, 11, 10];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — data-quality cells beside a metric, sensor-uptime rows, trailing-gap detection.
Avoid for — magnitude over time (HeatStrip) or exact values (Sparkline).

Sizing

Variants

intensity + shape

locale

locale formats the coverage percentage in the gutter and the accessible summary — the strip above reads "56 %" (German percent spacing) instead of "56%". format shapes the measured values the interactive entry announces.

Edge cases

a trailing shortfall counts as gaps

a measured zero is not a gap

no data

Four homes

Why this default

Shape carries the presence/absence distinction, not just color, so it survives forced-colors and print. A measured 0 is a filled cell like any other value; only null (no record) is hollow — the two never look the same. expected lets a trailing shortfall count as coverage loss: a feed that simply stops reporting is the worst gap of all, so it isn't silently dropped from the denominator. Nothing is ever interpolated across a gap — a missing slot stays visibly empty rather than being smoothed into its neighbors.

Accessibility

The accessible name states how many slots were measured, the coverage percentage, and the longest gap — "10 of 18 slots measured (56 %); longest gap 4 slots." An empty series states "No data." instead. The interactive entry roves slots with ←/→, announcing each one as a measured value or "no measurement".

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 slots; null = no measurement, 0 = a measured zero.
expected	number	Slots the window should contain — lets trailing missingness count.
mode	"binary" \| "intensity"	Presence only (default), or shade measured cells by value.
steps	number	Intensity granularity (default 5).
shape	"square" \| "round" \| "dot"	Cell shape from the shared vocabulary (default 'square').
label	"percent" \| "none"	State the coverage number in a right gutter.
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.