KQ-705 · OVERDRAFT/LINE

Overdraft Line

A balance line over a chart whose zero sits above the floor: the space down to the limit is the overdraft band. Scrubbing reveals the series up to a day on glide; below zero the line turns danger and a red fill drops from the zero line to that day's depth on glide, while the balance and the fee accrued roll their digits on snap. It is a slider: Left and Right step a day, Home and End jump.

KQ-705 · OVERDRAFT/LINE

Waylight Pay · EverydayDay 1 of 14

Balance

Overdrawn

Fee

Day 1 of 14 · balance $412.20 · fee $0.00

Install

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

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

Props

points: number[]; default —; End-of-day balances in major units, oldest first; negative is overdrawn.
limit: number; default —; The overdraft limit as a positive amount, the band's floor.
feeRate: number; default 19.9; Annual rate charged on the overdrawn amount, as a percentage, accrued per day over 365.
day / defaultDay: number; default 1; Controlled or initial count of days revealed, 1 to points.length.
onDayChange: (day: number, reading: OverdraftReading) => void; default —; Fires from the pointer or key event that moved the day, with that day's balance, overdrawn depth and fee.
format: (value: number) => string; default USD via Intl.NumberFormat; Turns an amount into its printed string.
label: string; default —; Names the chart for assistive technology.

Prop	Type	Default	Description
points	number[]	—	End-of-day balances in major units, oldest first; negative is overdrawn.
limit	number	—	The overdraft limit as a positive amount, the band's floor.
feeRate	number	19.9	Annual rate charged on the overdrawn amount, as a percentage, accrued per day over 365.
day / defaultDay	number	1	Controlled or initial count of days revealed, 1 to points.length.
onDayChange	(day: number, reading: OverdraftReading) => void	—	Fires from the pointer or key event that moved the day, with that day's balance, overdrawn depth and fee.
format	(value: number) => string	USD via Intl.NumberFormat	Turns an amount into its printed string.
label	string	—	Names the chart for assistive technology.