KQ-546 · CROSSHAIR/CHART

Crosshair Chart

A line chart you read with your hand. The trace draws itself on mount with pathLength on glide and the area fades in a beat behind it; moving a pointer snaps a crosshair to the nearest sample and the dot rides the line on flick, with a readout whose digits roll from a motion value instead of a re-render. The plot is a slider: Left and Right step one sample, Home and End jump to the ends, Escape clears the crosshair.

KQ-546 · CROSSHAIR/CHART

Apr 1Apr 30

Hover or arrow-key the trace

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/crosshair-chart

Props

points: CrosshairPoint[]; default —; The series, left to right; each sample carries a label and a value.
format: (value: number) => string; default rounded en-US; Formats every number the chart says out loud, the rolling readout included.
height: number; default 200; Plot height in px. The width is fluid and measured, so nothing overhangs a phone.
label: string; default —; Series name — the chart's accessible name and the readout's caption.
color: string; default var(--signal, var(--primary)); Trace and fill colour; any CSS colour, defaulting to the signal token.
onActiveChange: (index: number | null) => void; default —; Fires with the index under the crosshair, or null when it clears.

Prop	Type	Default	Description
points	CrosshairPoint[]	—	The series, left to right; each sample carries a label and a value.
format	(value: number) => string	rounded en-US	Formats every number the chart says out loud, the rolling readout included.
height	number	200	Plot height in px. The width is fluid and measured, so nothing overhangs a phone.
label	string	—	Series name — the chart's accessible name and the readout's caption.
color	string	var(--signal, var(--primary))	Trace and fill colour; any CSS colour, defaulting to the signal token.
onActiveChange	(index: number \| null) => void	—	Fires with the index under the crosshair, or null when it clears.