Skip to content
Pinky UI

Threshold / Band Chart

Normal, warning and target ranges become labelled chart structure with threshold-aware reading, instead of colour bands the reader has to decode from a legend.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Sun · Target94ms
Response time healthA trend over labelled normal, warning and target bands. Focus the chart and use arrow keys to read each value and band state.
  • Normal0ms–60ms
  • Watch60ms–80ms
  • Target80ms–100ms

Hairline thresholds, direct band labels and the diamond marker keep state legible without colour-only meaning.

Purpose

Normal, warning and target ranges become labelled chart structure with threshold-aware reading, instead of colour bands the reader has to decode from a legend.

Good for

  • Capacity, quality or response measures with meaningful operating ranges

Avoid for

  • Arbitrary categorical data without numeric thresholds

Usage

tsx
<ThresholdBandChart data={latency} bands={bands} label="Response time" />

Accessibility

  • The active reading includes value and band name; the visible band list repeats numeric boundaries.
  • Dashed threshold lines and a distinct marker keep state understandable without colour alone.

Performance

  • Bands are static SVG regions and the active point is the only changing geometry.

Related: radial-meter, interactive-line-chart.

Source: packages/skills/data/threshold-band-chart.md