caliper uidocs
DemoSign inGet Pro

Control chart

Pro

Is the process stable? Measurements with their mean and control limits. Points outside the limits and long runs on one side are marked once and listed.

Installs components/ui/control-chart.tsxDepends on d3-shapeMotion none in component source
pnpm dlx shadcn@latest add @caliper/control-chart
CI build time, main branch (seconds)

2 signals

CI build time, main branch (seconds)
PeriodValueSignal
#4120213
#4121207
#4122201
#4123199
#4124202
#4125210
#4126217
#4127219
#4128216
#4129211
#4130207
#4131209
#4132216
#4133223
#4134226
#4135223
#4136216
#4137209
#4138206
#4139209
#4140215
#4141218
#4142280Above the upper limit
#4143210
#4144202
#4145198
#4146200
#4147207
#4148225
#4149227
#4150224
#4151219
#4152215
#4153216
#41542237 in a row above the mean
#4155220

When to use #

Use it for

  • Build times, defect rates, daily error counts.
  • Deciding whether a spike needs action or is noise.

Skip it when

  • Trends you expect to grow; limits assume a stable process.
  • Fewer than about 20 points.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/control-chart

Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from controlLimits and ControlChart.

example.tsx
import { controlLimits, ControlChart } from "@/components/ui/control-chart"

The worked example comes with Pro

The 10-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

controlLimits

component

No props of its own; it accepts the native props of its root element.

ControlChart

component
PropTypeDefault
label *string—
points *readonly ControlPoint[]—
sigmanumber3
runnumber7
unitstring""
formatValue((value: number) => string)numberText
heightnumber260
loadingboolean—
errorstring—
classNamestring—

Accessibility #

It exposes group and status semantics, with aria-hidden, aria-label, aria-busy and aria-pressed kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.