ControlStrip

Thirty fill-weight readings off a production line, two of them outside the band. ControlStrip separates ordinary process variation from a genuine excursion: it is a Shewhart individuals chart, and the control band is the process center ± 3σ̂, where σ̂ = mean moving range ÷ 1.128 — the individuals estimator, stated outright (sample SD is not used; it inflates the limits under drift). In-control points are bare vertices. Only out-of-control points are marked, ringed in the negative color, so the eye lands on the exception instead of scanning every dot.

Install

import { ControlStrip } from "@microcharts/react/control-strip";// weights — real values under “Sample data” below<ControlStrip data={weights} title="Line 3 fill weight" />

// 30 fill-weight readings (g); mostly in control, two excursionsconst weights = [74, 73, 75, 74, 76, 73, 74, 75, 74, 73, 82, 74, 75, 73, 74, 76, 74, 73, 75, 74, 66, 74, 75, 74, 73, 76, 74, 75, 74, 73];

Try it

When to use it

Use it for a production line or metric in a table cell, an SPC control chart in a KPI card, or flagging out-of-control excursions. For a plain trend reach for Sparkline; for a strongly trending series, ChangePoint, since control limits assume a stationary process.

Sizing

Variants

rules="we" adds the implemented Western Electric subset, enumerated so none of them fires silently: WE-1 (a point beyond 3σ), WE-2 (two of three beyond 2σ), and WE-4 (eight on one side). dots="all" draws every point rather than only the excursions, and limits="percentile" swaps the ±3σ̂ band for stated quantiles, for skewed processes.

The chart draws no in-chart numbers, so format/locale shape the accessible summary and the interactive announcements. The strip above reads "All 12 points within control limits (center 2,5, limits 2,1–2,9)." with German decimal commas.

Edge cases

Below 10 points there are too few moving ranges to trust σ̂, so the band gets a dashed outline and the summary appends "Limits provisional (n=6)". A constant series has MR̄ = 0 and therefore σ̂ = 0: the band collapses into the center hairline rather than painting a fake zero-height zone.

Four homes

Accessibility

The accessible name states the excursion count, the center, and the limits: "2 of 30 points outside control limits (center 74.17, limits 67.84–80.49)." An in-control run reads "All N points within control limits …". The interactive entry steps the points, and out-of-control points announce which limit they crossed.

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.