Column Chart Picker Pricing Block for React

Edit the PLANS array. Each plan has its name, tagline, monthly price, capacity (the number its column is drawn from, here in GB), the capacityLabel written above the column, its features, the call to action's cta and href, and popular for the Most popular badge. The tallest plan fills the chart and the others are drawn in proportion; GRIDLINES lists the values that get a line, in the same unit. To chart seats, requests or anything else, change capacity, the labels, the heading "Storage included" and the range beside it, and the price-per-terabyte line.

Because it's drawn to scale: 200 GB is under 2% of 12 TB, so a true column is a sliver. Each column keeps at least 3% of the chart's height so the smallest plan stays visible and easy to tap, and its exact capacity is written above it. The price per terabyte under the price makes the same point in numbers: the 200 GB plan costs $14.95 a terabyte and the 12 TB plan $3.33. If your tiers span so many orders of magnitude that the picture matters more than the proportion, change heightOf and say so on the chart.

The columns are a radio group named Plan: Tab reaches the chosen plan, and the arrow keys move between plans and choose them. Each radio's name is the plan and its figures, as in "Library, 5 TB, $19.99 per month", so the chart doesn't need to be seen; the capacity labels and gridlines are hidden from screen readers so nothing is read twice. The other plans' details are hidden (invisible), not just transparent, so only the chosen plan is read, and the price is read as an amount rather than digit by digit.

The plan cell stacks every plan's name, tagline and features in the same grid cell and shows only the chosen one, so it's always as tall as the longest plan and nothing below it moves. The price uses tabular digits, and the columns never change height after they grow in: choosing a plan only changes colours and text. Under reduced motion the columns appear at full height and the text swaps without a fade.

The call to action follows the chosen plan: its label and href come from that plan. It's a ShineButton with render set to an a element and nativeButton={false}. Point each plan's href at your checkout route with the plan in the query. To open on another plan, change the starting value of the selected plan (library).

Use it when one number, such as storage, compute or seats, separates the plans and its growth is the selling point: the columns show the jump from one tier to the next at a glance. Plan cards side by side are better when buyers compare many features at once, since the chart shows one plan's details at a time.