shadcn.io is not affiliated with official shadcn/ui
Area Chart With Pill Tabs Stats Block for Solid
A framed area chart for a traffic analytics tool with pill tabs for Day, Week, Month and Year: choosing one swaps the readings, the labels under the chart and the total, whose digits roll.
Installation
Overview
An area chart with period tabs for Solid with Ark UI. A start-aligned header for Tidegauge, website traffic, has a pill tab list at its end: Day, Week, Month and Year. Under it a framed figure (a hairline frame with + marks on its corners) holds the period's visits as one big number with its change on the period before, and the chart: a smooth area over three gridlines, a labelled dot and chip on the peak, and a short row of labels under the curve (hours, weekdays, days or months). Choosing a tab swaps the readings, the labels, the peak and the total, and the digits of the total roll to the new number. The four panels share one box, so nothing moves on the page when you switch. Each period is a typed list of readings with its names, labels and the previous period's total, and the total, change, curve, peak and the chart's accessible name are all computed from it, so the text and the drawing can't disagree. It's built from Tabs, Guides, SlidingNumber and hand-drawn SVG in your theme's foreground colour, with no chart library and no colour for good or bad. For a traffic, sales or usage overview where one chart answers several time spans.
FAQ
How do I change the periods and the readings?
Edit PERIODS at the top of the file. Each period has an id, a tab label, a list of names (what each reading is called, shown in the peak's chip and the chart's name), the series of readings, the previous period's total, the span and versus phrases the sentence uses, the unit and the ticks shown under the chart. The total, the change, the curve and the peak are computed. Add a period and a fifth pill and panel appear; keep the number of labels small enough for a phone.
Why does the total live outside the tab panels?
Digits only roll when the same number element gets a new value. If the total sat inside each panel, a switch would unmount one and mount another, and the number would simply appear. So the figure sits above the panels and reads the selected period from state, in a polite live region so a screen reader hears the new total, while each panel holds just its chart.
How is the peak chip placed?
The curve's highest reading stands 78% of the way up its box, which leaves room above it. A dot and a chip are placed at that point from two CSS variables, and the chip hangs from the dot toward the side with room: centred in the middle of the chart, and against the end when the peak is one of the last readings, so it never runs off the frame.
Is it accessible?
Yes. The tabs are a real tab list with arrow-key navigation and visible focus, and the selected panel is a tab stop. The chart is an image named with its unit, span, first and last readings and its low and high with their names. The labels under it, the gridlines and the arrow are hidden from assistive technology because the sign and the image's name carry the same facts. The minus in a fall is a true minus sign, and values and signs are kept left to right so a right-to-left page doesn't move them.
What moves, and how does it fit on a phone?
The header and the frame fade up once on load, and the area fades in under the line; the total's digits roll when you switch. With reduced motion the digits change in place and nothing else moves. On a phone the chart is a 3:2 box, the tab list stays within the screen (it scrolls if it ever overflows), and the longer label rows show every other or every third label. Nothing scrolls sideways at 320 pixels.