Step Line Chart Card Stats Block for React

Edit TIERS (cheapest first; they become the vertical axis) and CHANGES (the week, the plan's index and the seats then; the first entry is where the workspace started). The step path, the rings, the log, the header and the chart's accessible name are derived from them, and "Upgraded to" or "Downgraded to" is worked out by comparing each plan with the one before. The log's grid has five columns from lg, matching the five changes: change lg:grid-cols-5 if you add or remove entries.

Each plan owns an equal band of the chart's height and the line runs through the middle of its band, so the four names sit on four evenly spaced hairlines. The names are HTML text aligned to those lines by percentage, which keeps them crisp and selectable, and they are hidden from assistive technology because the log and the chart's name say the same thing.

A plan does not change gradually: it holds until the week it changes. A step line (a run, then a vertical riser) shows that honestly, where a sloped line would suggest a trend between two readings that does not exist.

Yes. The drawing is an image whose name lists every change by week, and the change log under it is a real ordered list with the same information. The log's heading is visually hidden, the figures are in bdi elements and the chart box is dir="ltr" because time runs from the start to the end in every language.

The chart takes a taller shape and keeps its week labels; the change log becomes a stacked list, one change per row, separated by hairlines. The header's badge drops under the sentence.