React Measurement Cursors

Every benchtop scope has them and essentially no web chart does: two X cursors, two Y cursors, and the three numbers you actually want off a captured trace — ΔX, ΔY, and 1/ΔX. Drag a pair onto one ring period and you have read the ringing frequency.

Rail step response — VDD_CORE

400 samples · 10.0000 µs/sample

Y1Y2X1X26.88-0.770 µs3990.0 µs

ΔX

1320.0 µs

1/ΔX

757.6 Hz

ΔY

-4.319 V

Y @ X1 → X2

4.89 → 5.02 V

Drag the X1/X2 or Y1/Y2 handles to measure.

Installation

npx shadcn@latest add "https://kelvinui.com/registry/measurement-cursors.json"

Props

PropTypeDescription
datanumber[]Evenly spaced samples
sampleIntervalnumberSeconds between samples
timeUnitstringAxis label, e.g. "µs"
timeScalenumberMultiplier from seconds to timeUnit (µs → 1e6)
unitstringAmplitude unit (default "V")
heightnumberSVG height (default 280)

The readouts

ΔX is the time between the X cursors, in timeUnit. 1/ΔX is the reciprocal in Hz — the measurement you take when you want a ringing or oscillation frequency, and the reason cursors beat eyeballing a period off a grid. ΔY is the amplitude difference between the Y cursors, which is how you read overshoot or a rail droop.

The fourth panel reports the trace value under each X cursor, snapped to the nearest sample — distinct from the Y cursors, which float freely wherever you drag them. Those are two different questions ("what is the signal here?" versus "how far apart are these two levels?") and conflating them is the usual mistake.

Cursors are positioned in data space, not pixels: X as a fractional sample index, Y as a value. Resizing the container moves the cursors with the trace instead of drifting off the feature you parked them on. Rendering is on the deep surface with the electric accent — the one place that colour is permitted, and the right call for a scope trace.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.