shadcn.io is not affiliated with official shadcn/ui
Step Line Chart Card Stats Block for React Aria
A step line whose vertical axis is plan names, Free, Team, Business and Enterprise, with a change log under it in cells that share their hairlines and the current plan as a badge.
Installation
Overview
A step line chart for React with React Aria. A start-aligned header says which plan the workspace is on and since when, "On Business since week 22", with the current plan and its seat count as a badge at the end of the row. Under it, a framed chart draws the plan over 26 weeks: the vertical axis is not a number but the four plan names, each with its own band, and the line holds a plan until the week it changed, then steps straight to the next. The history is drawn light, the stay the workspace is in now at full weight, each change is a ring and the area under the line is a faint fill. Below the figure a change log, a band of five cells that shares its hairlines from rail to rail and ends the block, says the same in words: the week, "Upgraded to Team" or "Downgraded to Team", and the seats then. Every path, ring, sentence and the headline are computed from one typed list of changes. Weeks are counted, never dated, so the copy never goes stale.
FAQ
How do I change the plans and the log?
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.
How does the axis work with names instead of numbers?
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.
Why does the line step instead of slope?
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.
Is the chart accessible?
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.