Zopra/Charts
Guide
Getting startedAll chartsWhich chart to use?Domain specific
Base charts7
XY ChartTrendCandlestickHeatmapState TimelineFlame GraphBar Gauge
Derived charts73
Time SeriesHistogramStatus HistoryStatGaugeHoneyCombTracesNode GraphHeikin-AshiRenkoKagiPoint & FigureParetoIshikawaControl ChartBland-AltmanLollipopDumbbellSlopeBumpBack-to-BackWaterfallBulletFunnelMekkoForestBarcodeBeeswarmRidgelineHorizonSpectrogramAttention MapWaffleVennUpSetWarped WaffleWord CloudGanttSankeySankey MatrixTreemap ForceChord DiagramCircosArc DiagramAlluvialSankey FunnelDendrogramIcicleSunburstSpiderNightingale RoseParallel CoordinatesOscilloscopeEfficient FrontierPhase PortraitPoincaré MapBifurcationH-R DiagramRamachandranHarkerRoot LocusRadiation PatternQuiverHodographSmith ChartEye DiagramSequence LogoTernaryTernary ContourPiperStüveTephigramChoropleth

Charts/Quality charts

Control Chart

<ControlChart /> · 10 examples

A time series with a centre line and control limits that tell you when a point is more than noise.

Overview

Every process wobbles. Fill-weights vary, response times drift, the coffee machine produces a slightly different coffee every morning. The hard question is not did it change? but did it change more than it usually does? Without an answer, you either chase every blip, which exhausts everybody, or ignore every shift, which ruins the product.

The control chart is Walter Shewhart's answer, from his work at Bell Labs in the 1920s. Draw the measurements in time order. Add a line at the average. Add two more lines three standard deviations either side. Points inside the lines are what the process does when nothing special is happening. A point outside is a reason to go and look.

It is a surprisingly polite instrument. It never tells you what went wrong, only that the process has stopped behaving like itself, and it never raises its voice unless it has to.

Props

API

<ControlChart data={samples} x={|s: &Sample| s.time} value={|s: &Sample| s.diameter} zones={true} />
PropTypeDefault
dataas aboverequired
xFn(&T) -> f64: time, in milliseconds since the epochrequired
valueFn(&T) -> f64required
centerf64: a known process meanthe mean of the data
sigmaf64: a known standard deviationthe average moving range / 1.128
limitf64: the control limits, in σ3.
zonesbool: also draw ±1σ and ±2σfalse
colorcolour of the measurementsthe first series colour
x_axisAxisConfiga time axis
y_axisAxisConfigAxisConfig::new()
legend, tooltip, class

Points outside center ± limit × sigma are drawn in the bad colour. Estimating σ from the moving range follows the usual individuals (X-mR) chart, so a slow drift does not widen the limits.

Run them

10 examples

Press Run to load an example into the live render at the top of the page. Open one to read its code.

How to read it

  1. 01Follow the line left to right. Ignore any single wiggle inside the limits, that is the process being itself.
  2. 02Look for red points. They fall outside the dashed limit lines and deserve an investigation.
  3. 03Look for patterns inside the limits too: a long run on one side of the centre, or a steady drift, means the mean has moved even if no point is out.
  4. 04With zones on, count how many points sit beyond the 2-sigma lines. Several in a row is a warning before the limit is ever crossed.
  5. 05Hover a point for its value, the centre and both limits.

When to use it, and when not to

Reach for it when

  • You monitor a process over time and need a rule for when to react: line fill weights, batch yields, page load times, nightly job durations.
  • You are deciding whether an improvement did anything. Compare the points after the change against the old limits.
  • You want to stop a manager from reacting to individual points. Showing them the limits is cheaper than explaining variation.

Skip it when

  • The data has no meaningful time order, such as a set of unrelated samples. A histogram describes those better.
  • The process has a strong trend or seasonal cycle. The limits will flag the cycle as a crisis. Remove the pattern first, or chart the residuals.
  • You have fewer than about twenty points. The limits are mostly guesswork at that size.
  • You need to compare two measurement methods. That is a different question. Use a Bland-Altman plot.

The math behind it

Centre, spread, limits

Take observations x1,…,xnx_1, \dots, x_nx1​,…,xn​ in time order. The centre line is the mean, unless you pass center. The limits sit LLL standard deviations either side of it, where LLL is limit and defaults to 3.

The spread is not the ordinary standard deviation of all the points. If the process has shifted, the ordinary standard deviation absorbs the shift and the limits balloon around the very problem you want to see. Instead, sigma is estimated from the moving range of consecutive points, which only sees short-term wobble.

MR‾=1n−1∑i=2n∣xi−xi−1∣,σ^=MR‾d2,d2=1.128\overline{MR} = \frac{1}{n-1} \sum_{i=2}^{n} \lvert x_i - x_{i-1} \rvert, \qquad \hat\sigma = \frac{\overline{MR}}{d_2}, \quad d_2 = 1.128MR=n−11​i=2∑n​∣xi​−xi−1​∣,σ^=d2​MR​,d2​=1.128
UCL=xˉ+Lσ^,LCL=xˉ−Lσ^\mathrm{UCL} = \bar{x} + L\hat\sigma, \qquad \mathrm{LCL} = \bar{x} - L\hat\sigmaUCL=xˉ+Lσ^,LCL=xˉ−Lσ^

Why 1.128

For two independent normal values with standard deviation σ\sigmaσ, the expected absolute difference is d2σd_2\sigmad2​σ with d2≈1.128d_2 \approx 1.128d2​≈1.128. Dividing the mean moving range by it therefore recovers σ\sigmaσ for a stable process. Non-finite values are skipped before consecutive pairs are formed.

For a normal process, a point beyond three sigma happens with probability about 0.00270.00270.0027, so a stable process raises a false alarm about once every 370 points. That number, not any rule of nature, is the reason three was picked.

P(∣Z∣>3)≈0.0027  ⇒  average run≈370P(\lvert Z \rvert > 3) \approx 0.0027 \;\Rightarrow\; \text{average run} \approx 370P(∣Z∣>3)≈0.0027⇒average run≈370

What gets drawn

Each row is plotted at its x value. A point is flagged as out of control when it is strictly above the UCL or strictly below the LCL, and the flagged points are redrawn as larger markers in the theme's bad colour. With zones={true} four faint dotted lines are added at ±1σ^\pm 1\hat\sigma±1σ^ and ±2σ^\pm 2\hat\sigma±2σ^, for run rules such as eight points in a row on one side of the centre.

Passing center and sigma replaces the estimates, so new data is judged against limits learned earlier instead of against itself. The x axis defaults to time.

Real life usage

The Thursday that was just Thursday

Idris ran operations for a food-delivery startup whose promise was thirty-minute delivery, or at least a heartfelt apology. Every Monday he received a message from the founder that began with the median delivery time for the previous day and ended with several exclamation marks of varying emotional temperature.

On a Thursday in October the median was 33.1 minutes, up from 31.4. By nine in the morning the founder had proposed new rider bonuses, a different routing vendor and, in a message sent at 9:14, a vow to "completely rethink logistics".

Idris suspected the median had done nothing more than be a number. But suspecting is a weak argument against a man who has already drafted the vendor email.

He exported ninety days of daily medians and drew them with <ControlChart>, letting it estimate the centre and the sigma from the data. The centre came out at 31.9 minutes and the upper limit at 35.2. Thursday sat comfortably inside, a little above the line, in the company of eleven other days that had looked equally alarming at the time.

He sent the picture with one sentence: the process had not changed, and the limit was 35.2. The vendor email stayed in drafts.

Three weeks later a point did poke through the top. That one was real: a mapping update had silently sent riders to the wrong side of a river. It was found in a day, partly because nobody had spent the previous month crying wolf at ordinary Thursdays.

A control chart's main job is not to find problems. It is to make sure you only get excited when it counts.

Pitfalls

  • Limits from contaminated data. Estimating limits from a series that already contains a shift gives you limits that hide it. Once you know the process, pass center and sigma from a stable stretch.
  • Confusing control limits with specification limits. Control limits describe what the process does. A spec describes what the customer wants. A process can be perfectly stable and perfectly useless.
  • Autocorrelated data. If each point depends on the last (a slowly draining tank, a rolling average), consecutive differences are small and the limits become too tight and cry wolf. Chart raw, independent measurements where possible.
  • Reacting to every red dot. About one stable point in 370 will be outside at three sigma by pure bad luck. Investigate, but do not fire anyone.

From around the web

Watch and read

YouTubeControl Charts simply explained - Statistical process control - Xbar-R Chart, I-MR Chart,...numiqoExplains control limits and the common control chart types.
YouTubeStatistical Process Control (SPC) Explained | Control Charts in Quality ManagementOperations & Supply Chain Management UniversityPlaces control charts in the wider SPC practice.

Keep going

Related charts

Time SeriesWhen you just want to see the series with annotations and no statistical judgement.ParetoAfter a signal, to rank which defect types are driving it.Bland-AltmanWhen the question is whether two instruments agree, not whether one process is stable.
PreviousIshikawaNextBland-Altman

On this page

  • Live
  • Overview
  • API
  • Examples
  • How to read it
  • When to use it
  • The math
  • Story
  • Pitfalls
  • Watch and read
  • Related