CoverageStrip

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" />

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

Try it

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

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

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, press Escape, or press outside the chart. On touch, a tap pins and a drag scrubs.

Props

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.