Spend Trend Chart
A spend trend panel with three stat columns above a six month stacked bar chart splitting invoices into plan, seats, and usage.
A spend trend panel with three stat columns above a six month stacked bar chart splitting invoices into plan, seats, and usage.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Spend Trend Chart is the six month billing history for the Acme workspace, with three stat columns up top (last invoice $223.00, six month average $196.50, change vs Jan +31%) sitting over a stacked bar chart. Each bar is one invoice split into base plan, seats, and usage, so the shape of the growth is legible at a glance. The footer names the driver in words: usage is the fastest growing line, up from $14 in January to $43 in June, seats added two in March and two in May, and the base plan has not moved.
The chart is built on ui/chart with recharts, a typed ChartConfig mapping each series to a chart color and the data as a plain array of monthly rows. Swapping in your own invoice series is all it takes to redraw the bars, tooltip, and legend.
Reach for this block on the billing overview or a finance reporting page, wired to your invoice aggregation endpoint. Feed it monthly totals already split by line item, and update the stat row and footer summary from the same series.
A natural flow around it on an Application Pro page:
Before
After
One strong use is invoice spend split by line item. Other trend surfaces:
Tip: pair the chart with a one line driver summary; the bars show the trend but the sentence tells finance why it moved.