KQ-674 · FORECAST/LINE

Forecast Line

A balance chart whose line changes character at today: solid for what happened, the same stroke dashed for what is only projected, because a forecast is a claim and should not be drawn like a fact. Toggling a scheduled bill re-prices the plan and a clip rectangle sweeps open from today's dot to the end of the month on glide, which is what lets the redraw keep its dashes; the closing figure counts through a motion value on snap and today's dot holds a slow drift breath. Every bill is a real switch in the tab order, and a projection that crosses zero shades the band below the axis and marks the day in danger.

KQ-674 · FORECAST/LINE

Waylight Pay · checkingClosing day 30

-$105

3 of 3 bills on · closing -$105 · short on day 29

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/forecast-line

Props

history: number[]; default —; Actual closing balances for day 1 through today, in order.
bills: ScheduledBill[]; default []; { id, label, day, amount } — future outflows the forecast may include.
enabled / defaultEnabled: string[]; default —; Controlled or initial ids of the bills in the plan; defaults to every bill.
onEnabledChange: (ids: string[]) => void; default —; Fires from the click or key that toggled a bill.
onProjectionChange: (projection: BalanceProjection) => void; default —; Fires from the same event with the newly priced plan: points, closing balance, and the first short day.
days: number; default 30; Days on the x axis; the forecast runs from the end of the history to here.
dailyBurn: number; default 0; Average daily spend carried through the forecast, on top of the bills.
format: (value: number) => string; default —; Formats every money figure; defaults to an explicit en-US currency formatter.
height: number; default 132; Plot height in px; the width is fluid.
label: string; default Balance forecast; Names the chart; printed above it.

Prop	Type	Default	Description
history	number[]	—	Actual closing balances for day 1 through today, in order.
bills	ScheduledBill[]	[]	{ id, label, day, amount } — future outflows the forecast may include.
enabled / defaultEnabled	string[]	—	Controlled or initial ids of the bills in the plan; defaults to every bill.
onEnabledChange	(ids: string[]) => void	—	Fires from the click or key that toggled a bill.
onProjectionChange	(projection: BalanceProjection) => void	—	Fires from the same event with the newly priced plan: points, closing balance, and the first short day.
days	number	30	Days on the x axis; the forecast runs from the end of the history to here.
dailyBurn	number	0	Average daily spend carried through the forecast, on top of the bills.
format	(value: number) => string	—	Formats every money figure; defaults to an explicit en-US currency formatter.
height	number	132	Plot height in px; the width is fluid.
label	string	Balance forecast	Names the chart; printed above it.