# Monthly spend chart

Monthly spend chart: a free component, built on your design tokens, to use for monthly spend or usage against a budget, with a forecast. Six months of spend as bars, with the current month's forecast hatched on top, a dashed budget line and a tooltip on the bar you point at.

Prompt: Add the OpenDesigner component bar-chart to this project: https://opendesigner.dev/library/r/bar-chart.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: hover, focus, current month, forecast over budget.

Accessibility: Each bar is a button whose name says the month, the amount and how it sits against the budget; Tab moves through the months and shows the same tooltip as hover.

File: https://opendesigner.dev/library/r/bar-chart.html