KQ-545 · BUDGET/BAR

Budget Bar

A month's spending as one stacked bar. The segments grow to their share on glide in a single cascade, then hold: reading one expands it on snap while its neighbours compress, and the label and amount surface inside the segment rather than in a tooltip over the bar. Turning a legend chip off drops that category and the bar re-flows on glide. Arrows walk the segments, Home and End jump to the ends, Enter pins a reading.

KQ-545 · BUDGET/BAR

Gaugeworks · June

Read a segment with the pointer or the arrow keys

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/budget-bar

Props

segments: { id: string; label: string; value: number; color: string }[]; default —; Categories and amounts, left to right.
format: (value: number) => string; default en-US thousands; Formats amounts in the bar, the legend, and the total.
label: string; default —; Bar title.
onActiveChange: (segment: BudgetSegment | null) => void; default —; Fires with the segment being read; null when the reading is dropped.

Prop	Type	Default	Description
segments	{ id: string; label: string; value: number; color: string }[]	—	Categories and amounts, left to right.
format	(value: number) => string	en-US thousands	Formats amounts in the bar, the legend, and the total.
label	string	—	Bar title.
onActiveChange	(segment: BudgetSegment \| null) => void	—	Fires with the segment being read; null when the reading is dropped.