Radar Chart Pricing Block for React

DIMENSIONS lists the axes, clockwise from the top, each with a key and a label. Each plan in PLANS has a scores object with a value from 0 to 10 per key, and the shape, its dots and the chart's description are all worked out from those numbers. The geometry adapts to the number of axes, so five or seven work too; keep labels short, because VIEW_BOX leaves about 60 units beside the chart for them.

They're relative ratings you set, not measurements: a 7 on Connections means "well above the plan below it", not 7,000 connections. That's why each plan's real limits are listed under the chart (10 GB, 2 vCPU, 1,000 pooled connections) and the header says the scores are relative. Rate the axes on the same basis for every plan, and write the actual limit next to any score a buyer might want to check.

Below lg the plans sit in a row you swipe sideways, each card snapping to the middle, the popular plan first and the next card peeking so it's clear there's more. The dots under it are buttons named for each plan (Launch, Hobby, Scale): the one in view is marked and pressing another scrolls its card into view, smoothly unless the visitor prefers reduced motion. Cards are 85% of the width on a phone and about half from sm, and the carousel is a labelled list whose cards each hold a link, so the keyboard reaches every plan and the browser scrolls it into view.

Each call to action is a real link to its plan's href, for example /checkout?plan=launch; the chart is only an illustration and plays no part in billing. It's ShineButton with render={<a href={plan.href} />} and nativeButton={false}.

Yes. Each chart is an image (role="img") whose name lists every score, as in "Launch plan capability scores: Connections 7 out of 10, Compute 5 out of 10…", so the information isn't locked in the drawing, and the limits are in a real list under it. Plans are h3 headings under the section's h2, prices read as "$29 per month", and each call to action names its plan. The labels inside the chart are 12 pixels tall at full size.

The cards, text and buttons follow the page's direction, but the chart itself is drawn the same way in both: its box is set to left-to-right so the labels keep their places around the hexagon. The axes are a drawing, not reading order, so mirroring them would only move each label away from its own corner. The carousel does follow the direction: it starts from the right edge and the card that's in view is found by its position, not by scroll offset.

Use radar charts when plans differ by degree on a few dimensions that all matter, such as storage, compute and support, and buyers want to see which shape fits them. Use a feature table when the differences are yes-or-no and buyers need to check specific features row by row: a radar chart summarises, a table proves.