Skip to content
Pinky UI

data

Range Brush Chart

An overview and focused chart share one selected window with draggable and keyboard-adjustable bounds.

  • data
  • chart
  • range
  • brush
  • selection

Live preview

Usage history · Sat21k
Selected window
TueSat

Drag the selected window or adjust either labelled handle. The focused chart keeps its reading position.

Quick usage

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

<RangeBrushChart data={history} label="Usage history" />

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
dataVizPoint[]—Ordered values for the overview and focused reading.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Start and end handles are real labelled range inputs with a visible Reset range action.
  • The selected window and current value remain readable when motion is reduced.

Performance

  • The overview and focus use deterministic SVG geometry; no external chart engine is required.
  • Pointer updates stay local to the brush and focused chart.

Reduced motion

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

When to use

  • Short histories where overview context and local inspection belong together

When not to use

  • Unbounded time-series analysis or dense financial tooling

Skill

Purpose

An overview and a focused chart share one selected window with draggable and keyboard-adjustable bounds, so zooming stays connected to the whole history.

Good for

  • Short histories where overview context and local inspection belong together

Avoid for

  • Unbounded time-series analysis or dense financial tooling

Usage

tsx
<RangeBrushChart data={history} label="Usage history" />

Accessibility

  • Start and end handles are real labelled range inputs with a visible Reset range action.
  • The selected window and current value remain readable when motion is reduced.

Performance

  • The overview and focus use deterministic SVG geometry; no external chart engine is required.
  • Pointer updates stay local to the brush and focused chart.

Related: timeline-scrubber, interactive-line-chart.

Open this skill on its own page