KQ-625 · CANDLE/BRUSH

Candle Brush

A candlestick chart you can draw on. Each candle grows out of its own open — the body scales from nothing with its transform origin pinned to the open edge, so an up bar rises and a down bar drops — on glide in a cascade that keeps the whole chart inside the choreography budget. Pressing drops a brush anchor and dragging sweeps a range whose edges snap to whole candles on snap while everything outside dims on a tween and the readout gives the open, close and percent; the crosshair snaps to the bar under the pointer on flick rather than riding free. Arrows walk the crosshair, Space drops the anchor, Shift with an arrow extends the range and Escape clears it.

KQ-625 · CANDLE/BRUSH

BSN/USD28 bars

Drag to read a range—

Range $23.00 – $23.76

No range · drag to read a move

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/candle-brush

Props

candles: Candle[]; default —; Bars, oldest first: id, label, open, high, low and close. The label is printed by the caller, so no clock is read here.
symbol: string; default "BSN/USD"; The instrument; names the plot for assistive technology.
height: number; default 164; Plot height in px. The width is fluid and measured with a ResizeObserver.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Turns a price into its printed string. The default pins an explicit locale so server and client agree.
selection / defaultSelection: { start: number; end: number } | null; default null; Controlled or initial brushed range, as inclusive candle indices.
onSelectionChange: (selection: CandleRange | null) => void; default —; Fires from the pointer or key that changed the range, never during render.
onCursorChange: (index: number | null) => void; default —; Fires from the pointer or key that moved the crosshair.

Prop	Type	Default	Description
candles	Candle[]	—	Bars, oldest first: id, label, open, high, low and close. The label is printed by the caller, so no clock is read here.
symbol	string	"BSN/USD"	The instrument; names the plot for assistive technology.
height	number	164	Plot height in px. The width is fluid and measured with a ResizeObserver.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Turns a price into its printed string. The default pins an explicit locale so server and client agree.
selection / defaultSelection	{ start: number; end: number } \| null	null	Controlled or initial brushed range, as inclusive candle indices.
onSelectionChange	(selection: CandleRange \| null) => void	—	Fires from the pointer or key that changed the range, never during render.
onCursorChange	(index: number \| null) => void	—	Fires from the pointer or key that moved the crosshair.