Annual vs Monthly Cost Chart — Free HTML CSS JS Snippet, No Library

Pricing pages routinely claim "save by paying annually" without showing why — this snippet makes the crossover point visually undeniable by plotting two real, computed lines across 12 months: cumulative cost when paying monthly, and the flat cost of paying annually upfront. There's no charting library involved; the SVG path data is generated directly from two small arrays of actual numbers.

The two lines, computed, not illustrated

monthlyLine is built as months.map((m) => MONTHLY_RATE * m) — literally the monthly rate multiplied by the month number, so month 1 is \$12, month 6 is \$72, month 12 is \$144. annualLine is a flat array of the same \$108 value repeated 12 times, representing money paid once upfront in month 1 that then simply sits flat as a comparison baseline. Nothing here is a hand-drawn bar height standing in for "roughly what it might cost" — every point is the literal formula result.

Finding the real break-even month

A loop walks monthlyLine and returns the first month where the cumulative monthly cost exceeds the flat annual price: at \$12/month against a \$108 annual price, month 9 totals \$108 (equal) and month 10 totals \$120 (the first month strictly *greater* than \$108) — so the chart correctly reports month 10 as the break-even point, with a dashed vertical marker drawn at that exact x-position, computed from the same data the lines are drawn from, not eyeballed.

Building the SVG path by hand

pathFor(values) maps each data point through xFor(month) and yFor(value) — linear scales computed from the chart's pixel dimensions, the data range, and a "nice" rounded-up maximum for clean gridlines — and joins them into a standard SVG path d string (M for the first point, L for every subsequent one). This is the same technique every JS charting library uses internally; writing it directly keeps the snippet dependency-free and the data flow fully transparent, from raw numbers to rendered pixels.

Why cumulative, not per-month, cost is the right comparison

A bar chart of "cost this month" would show the annual plan as one big spike in month 1 and nothing after — technically accurate but visually misleading about ongoing value. Plotting *cumulative* spend makes the actual trade-off legible: you pay more upfront with the annual plan, and month-by-month the monthly plan looks cheaper, right up until the point its running total crosses and then permanently exceeds the annual price. That crossing point, not the raw prices, is the number that actually matters to a buyer deciding which to choose.

Customizing it

Change MONTHLY_RATE and ANNUAL_PRICE to your real plan pricing — every derived stat, line, and the break-even marker recalculate automatically. Pair this with a pricing toggle so switching a monthly/annual toggle elsewhere on the page could drive the same two constants.