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
Δ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
Props
| Prop | Type | Description |
|---|---|---|
| data | number[] | Evenly spaced samples |
| sampleInterval | number | Seconds between samples |
| timeUnit | string | Axis label, e.g. "µs" |
| timeScale | number | Multiplier from seconds to timeUnit (µs → 1e6) |
| unit | string | Amplitude unit (default "V") |
| height | number | SVG 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.