CoverageStrip
CoverageStrip shows which slots in a series were measured and which are missing, drawing gaps hollow.
- encodes
- presence/absence as cell fill on a time strip
- precision
- high — binary presence per slot
- nodes
- 1 per cell (≤ 120 documented)
A sensor was meant to report 18 times and reported 10. CoverageStrip fills the measured slots and outlines the missing
ones with a hairline, so you can see where nothing was measured before you trust the numbers. The distinction between
null (no measurement) and 0 (a measured zero) is the whole chart, and shape carries it, so it survives
forced-colors and print. Nothing is interpolated across a gap.
Install
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];Try it
When to use it
Use it for data-quality cells beside a metric, sensor-uptime rows, and trailing-gap detection. For magnitude over time reach for HeatStrip; for exact values, Sparkline.
Sizing
Variants
mode="intensity" shades each filled slot by its value; shape="round" swaps the slot shape. locale formats the
coverage percentage in the gutter and the accessible summary: the strip above reads "56 %" with German percent spacing
instead of "56%". format shapes the measured values the interactive entry announces.
Edge cases
An expected beyond data.length pads the tail with hollow slots, so a feed that stops reporting counts as coverage
loss rather than dropping out of the denominator. A measured 0 is a filled cell like any other value; only null (no
record) is hollow. A missing slot stays visibly empty instead of being smoothed into its neighbors, and an empty series
renders the frame alone.
Four homes
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.