TimeInRange

72% in range, 9% below, 19% above. TimeInRange prints the share of a period that stayed inside its corridor and which side the rest missed on, with the in-range percent leading. Zones sit in a fixed order (below, in, above), so the strip reads by position first and color second. They are never sorted by magnitude, because which side a miss landed on is half the reading.

Install

import { TimeInRange } from "@microcharts/react/time-in-range";<TimeInRange data={{ below: 9, in: 72, above: 19 }} title="Time in range" />

Try it

When to use it

Use it for SLO and uptime corridors, glucose-style time-in-range, and thermal or budget bands. To rank parts use SegmentedBar; for a single ratio use Progress.

Sizing

Variants

Severity tiers are drawn in the same hue at greater ink weight, so a severe zone never depends on color alone.

Edge cases

Percent labels use largest-remainder rounding, so they always sum to 100 and the summary reads the same integers as the labels.

Four homes

Accessibility

The accessible name leads with the headline, then the misses: "72% in range, 7% below, 15% above, 2% severe low, 4% severe high." The interactive entry roves the zones, and each announces its share ("in range: 72%.").

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

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.