KQ-720 · PRICE/SPARKLINE

Price Sparkline

A day's prices as one line that grows across its frame. Each arriving point draws only the newest segment with pathLength on glide while the points before it hold still, the last point's dot travels to its new place on glide with a halo that breathes on a slow reversing tween and a ring that expands on each arrival, and once the day overfills the frame the window slides. Hovering snaps a hairline to the nearest print and the header reads its time and price; the plot is a slider where Left and Right walk the points, Home and End jump, and Escape returns to the latest.

KQ-720 · PRICE/SPARKLINE

BSN/USD

BSN $24.29 · 12 points · reading last

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/price-sparkline

Props

points: SparkPricePoint[]; default —; The day's prints as { time, price }, oldest first. Appending one extends the line by a segment.
capacity: number; default 48; Points across the full width; more than this slides the window to the last capacity points.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Prints every price. The default pins an explicit locale so server and client agree.
height: number; default 96; Plot height in px; the width is fluid and measured with a ResizeObserver.
label: string; default "Price"; The instrument; prints in the header and names the slider.
onReadChange: (point: SparkPricePoint | null, index: number | null) => void; default —; Fires from the pointer or key that moved the reading to a point, or returned it to the latest (null).

Prop	Type	Default	Description
points	SparkPricePoint[]	—	The day's prints as { time, price }, oldest first. Appending one extends the line by a segment.
capacity	number	48	Points across the full width; more than this slides the window to the last capacity points.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Prints every price. The default pins an explicit locale so server and client agree.
height	number	96	Plot height in px; the width is fluid and measured with a ResizeObserver.
label	string	"Price"	The instrument; prints in the header and names the slider.
onReadChange	(point: SparkPricePoint \| null, index: number \| null) => void	—	Fires from the pointer or key that moved the reading to a point, or returned it to the latest (null).