Lesson 4 of 7 · 4 min

Reading the 12-Month Revenue Chart

Use the bar chart to spot seasonal patterns, month-over-month trends, and collection timing across the trailing year.

Reading the 12-Month Revenue Chart

Video coming soon

4/7

Lesson Notes

01

Below the KPI cards is a card titled 'Last 12 months' with the subtitle 'Collected per month from PAID invoices. Hover bars for exact totals.' The chart is a simple vertical bar chart rendered entirely in HTML/CSS — 12 equally-wide columns, one per calendar month, arranged oldest-to-newest left to right. The chart area has a fixed height of 160px (h-40 in Tailwind).

02

Each bar's height is proportional to that month's collected revenue relative to the highest month in the trailing 12. The tallest bar always fills the full 160px height; all other bars are scaled relative to it. This means the chart shows relative distribution, not absolute scale — a month with $0 would render as a 2px stub (the minimum height) rather than a flat line, so the bars are always visible even in low-revenue months. Hovering over any bar shows a browser tooltip with the full month name, year, dollar amount, and invoice count (e.g., 'Jun 2025 — CA$12,450.00 (8 invoices)').

03

The month labels along the bottom use three-letter abbreviations (Jan, Feb, Mar…). The chart spans from 12 months ago through the current month. Because the data is fetched by paidAt timestamp (not invoiceDate or sentAt), a month's bar reflects cash actually collected that month — an invoice sent in April but paid in June counts in June's bar, not April's. This makes the chart a cash-basis revenue view, not an accrual view.

04

The chart automatically updates as new invoices are marked PAID. There is no refresh button — reload the page to see the latest data. If no invoices have been paid at all, the chart renders 12 flat stubs at minimum height.

05

Practical use: look for your peak months (tallest bars) to plan staffing and equipment purchasing, and look for troughs to plan marketing pushes or discount campaigns. Because the data is cash-basis, the chart also helps diagnose collection delays — if you had a strong booking month but a weak chart bar, check the Invoices list for SENT or OVERDUE invoices from that period that haven't been collected yet.

Key Takeaways

  • The bar chart shows 12 calendar months of collected (PAID) revenue, scaled relative to the highest month.
  • Hover any bar to see the full month, exact dollar amount, and invoice count in a browser tooltip.
  • Revenue is counted by paidAt date, not invoice date — this is a cash-basis view, not accrual.
  • A visible 2px minimum stub is shown even for zero-revenue months so bars are always rendered.
  • Use peak vs. trough months to plan staffing, purchasing, and targeted marketing campaigns.
Related documentation at docs.vremly.com