shadcn.io is not affiliated with official shadcn/ui
Wave Graph Point Selector Features Block for Solid
A smooth retention curve for a cohort tool: six weekly points on one line, a value that floats on hover and a cell under the chart that reads out the chosen week.
Installation
Overview
A line-chart features section for Solid with Ark UI. A smooth curve falls from week one to week six over a faint area, with hairline gridlines at every quarter, a percent axis at the start and a week axis along the foot. The six points are buttons in one group: hovering or focusing one floats its value above it, and choosing one draws a guide down to the axis and fills the cell beneath the chart, which shares a hairline with it, with that week's name, its change on the week before, a sentence about why, and the percentage rolling to its new value. The cells run from rail to rail. It's built from Sliding Number, Badge and Guides, with CSS transitions for the points and your theme's tokens for every colour. For retention, funnels, usage over time and any chart whose story is in a few moments on the line.
FAQ
How do I change the data?
Edit WEEKS at the top of the file: each has a name, a percentage and a sentence. The curve, its area and the point positions are all worked out from those values, so adding a point re-spaces the rest. The curve leaves each point level, so it never overshoots a value between two points.
How do I use the chart with a keyboard?
The points are one group of radio buttons: Tab puts focus on the chosen point and the arrow keys move along the curve, choosing a point as they go. The focused point floats its value and gets a focus ring, and each point's description points at its week's text under the chart.
What does a screen reader read?
Each point is a radio button named for its week, with that week's change and sentence as its description. The chart's caption gives the shape in a sentence (78 percent in week 1 to 43 percent in week 6), and the cell under the chart is real text, so the drawing is never the only source.
Does the cell under the chart change height?
No. The six weeks' texts sit in one grid cell and the five not chosen are invisible, so it is as tall as the longest and nothing below it moves when you choose a point.