React Time-Series Brush

Copy Page

A day of per-minute telemetry is 1,440 points — too many to read at once, too few to throw away. The overview keeps the whole shape in view; drag the window and the detail chart above resolves to it. Grab an edge to resize, the middle to pan.

Installation

Props

Pointer capture, not a library

The brush is plain SVG with pointer-capture drag handling — three modes (move, start, end) tracked in a ref, resolved against the overview's bounding box in fractional coordinates. There is no charting or gesture dependency, so it ships small and behaves the same under React strict mode.

Two details that make it feel right: the window enforces a minimum width so the edges never cross, and dragging the middle clamps to [0, 1] while preserving width, so panning to the end doesn't shrink your selection. The detail chart re-scales its y-axis to whatever is inside the window — zooming into a quiet stretch still fills the vertical space, which is usually what you want when hunting for a small excursion.

For a single fixed-resolution series, a plain line chart is enough; reach for this when the series is long enough that the whole-range view and the readable-detail view genuinely conflict.