ControlStrip

ControlStrip answers "is the process in control — or did something leave the band?". It's a Shewhart individuals chart: 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), because an in-control process should look boring.

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

• Good for — a production line or metric in a table cell, an SPC control chart in a KPI card, flagging out-of-control excursions at a glance.
• Avoid for — a plain trend (Sparkline) or a strongly trending series (ChangePoint — control limits assume a stationary process).

Sizing

Variants

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

Four homes

Why this default

Flag only the out-of-band points, because an in-control process should look boring — the eye should land on the exception, not scan every dot. The σ̂ estimator is the moving-range one (MR̄ / 1.128), never a vague "±3 sigma"; limits="percentile" states its exact quantiles for skewed processes. Western Electric rules are conventions, so the implemented subset is enumerated (WE-1 beyond 3σ, WE-2 two-of-three beyond 2σ, WE-4 eight on one side) and none fires silently. With fewer than 10 points the band is dashed and the summary says "limits provisional".

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.