React Capability Histogram

Copy Page

Where the control chart asks whether a process is stable, this asks whether it is capable — whether its natural spread actually fits inside the spec window. It bins the sample, draws the limits, fits a normal curve, and computes Cp and Cpk.

Installation

Props

Cp says the spread fits; Cpk says it fits where it is

This is the distinction the component is built to make visible:

• Cp = (USL − LSL) / 6σ — could the distribution fit the window if it were perfectly centred?
• Cpk = min((USL − μ) / 3σ, (μ − LSL) / 3σ) — does it fit given where the mean actually sits?

The demo has Cp ≈ 1.42 with Cpk ≈ 0.84: the spread is comfortably tight, but the process runs high, so it eats into the upper limit anyway. That gap is the whole reason both indices exist — a healthy Cp with a poor Cpk means recentre, not reduce variation, and those are very different corrective actions. The convention baked into the status pill: Cpk ≥ 1.33 capable, ≥ 1.0 marginal, below that not capable.

Deterministic demo data

The sample is generated from a seeded Box–Muller draw, never Math.random(). In a statically exported app, random data computed at render time produces different numbers on the server and the client — a guaranteed hydration mismatch. If you feed this component synthetic data, seed it; if you feed it real measurements, you are fine.