Skip to content
Pinky UI

data

Threshold / Band Chart

Normal, warning and target ranges become labelled chart structure with threshold-aware reading.

  • data
  • chart
  • threshold
  • bands
  • status

Live preview

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.

Quick usage

usage
import { ThresholdBandChart } from "@pinky-ui/systems";

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

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
bandsThresholdBand[]—Ordered labelled numeric ranges with optional descriptions.
classNamestring—Styles the outer interaction surface.

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.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Capacity, quality or response measures with meaningful operating ranges

When not to use

  • Arbitrary categorical data without numeric thresholds

Skill

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.

Open this skill on its own page