TCO Projection Pricing Block for React

Edit the PLANS array: each plan has a monthly price, a one-off setup cost at the start, its terms line, and a cta label. A plan with no cta (the self-managed baseline) is charted but can't be bought. The featured plan gets the tinted row, the outline badge, the primary button and the thickest line. costAfter turns a plan into the cost after any number of months, and the chart, the totals and the saving sentence all use it, so a different model, such as yearly price rises or usage tiers, only needs a change there. HORIZONS lists the switch's options in years.

Each plan's line is an SVG polyline with a point per month, in a 100 by 100 box stretched to the chart's size, with strokes that keep their width as it stretches. The gridlines, axis labels and end dots are HTML placed by percentage, so the text stays at its normal size on a phone. The cost axis picks a round step, such as $10k, so every gridline sits on its label. The lines are three greys from the theme, set per plan in TONES, so the lowest-cost plan's line is the heaviest and the primary colour stays on the one button.

Yes. The drawing is hidden from assistive technology, and the chart's caption says the same thing in words: "Cumulative cost over 3 years: Managed $43,200, Committed $34,200, Self-managed $39,600. Committed saves $9,000 over 3 years against Managed." The caption is a polite live region, so it's read again when the horizon changes, and only then. The horizon switch and the phone plan switch are radio groups with names, and each plan is an h3.

Below lg the three plans share one grid cell and the ones you aren't looking at are invisible, so the panel always keeps the height of the tallest plan and nothing moves when you switch. Invisible plans are removed from tab order and from screen readers. From lg all three are shown as stacked rows and the switch is hidden.

Each button is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Build the href from the horizon state, for example /contact?plan=committed&term=3, so your team knows whether the visitor was weighing one year or several.

When the cheapest plan this month isn't the cheapest over the contract: setup fees, long terms or the cost of running it yourself shift the comparison over time, and buyers, often finance teams, compare totals rather than monthly prices. The self-managed line here is an estimate and is labelled as one under the band. For simple monthly plans with no fees, a billing toggle says the same in less space.