Month chart
Spec
Spending by month, one bar per month, oldest first: 12 on wide screens and 6 on phones (Reports, issue 122). It is also the period picker: each bar is a button that shows its month.
Rules
- Each bar is as tall as its month's spending against the tallest month shown. A month with nothing has no bar.
- Bars are border-control; the chosen month is surface-accent, its amount above it and its label underlined (border-accent). The month that isn't over yet is striped in its color, with an outline, until it's over.
- Under each bar, the month: "Sep". For screen readers each bar is a button named "September 2026, $1,234.56" ("October 2026 so far, …" for this month), with aria-pressed on the chosen one.
- The group is named "Spending by month". Tab reaches each month; Enter or Space chooses it.
- Colour is never the only signal: the chosen month also has its amount and the underline.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.0, Oct 15 2026: First version: one bar per month, the chosen month solid and underlined, this month striped until it's over; each bar a button that shows its month. (#122)