shadcn.io is not affiliated with official shadcn/ui
Small Multiples Sparkline Stats Block for React Aria
Six measures of a stationery shop as aligned sparkline rows in one framed panel on a shared month axis, with a guide that reads all six at the month under your pointer.
Installation
Overview
A small-multiples stats card for React with React Aria. A start-aligned header states the peak ("Orders peaked at 548 in December"), then one framed panel with + marks on its corners holds six rows divided by hairlines: orders, revenue, visitors, conversion, average basket and returns. Each row is a name, a line in a single foreground weight with a faint fill, and the month's value. All six rows share one set of month labels under them, so a peak in one lines up with the peak in the rest. Move across the lines, drag, or use the arrow keys and one guide runs through all six rows while every value changes to the month under it; leaving puts the latest month back. Revenue is orders times the basket and conversion is orders over visitors, so the rows always agree. For shops, product analytics and any report where several measures follow one calendar. The frame is rail to rail, inset from the page lines.
FAQ
How do I change the measures and months?
Edit MONTHS and the lists above MEASURES (ORDERS, VISITORS, BASKET, RETURNS). A measure is a label, one reading per month and a function that writes a reading. Revenue and conversion are derived from the lists they depend on. Each series needs one reading per month; the axis, the dots and the guide follow MONTHS.
How does the guide work?
A native range input named Month lies unseen over the plot, so pointer, touch drag and the arrow, Home and End keys all work as they do on any slider. Moving the pointer over the plot also reads the month under it. On focus the guide appears with a focus ring around the plot, and its spoken value is the month followed by all six readings ("March: Orders 389, Revenue ...").
Do the rows share a scale?
They share the time axis, not the vertical scale: each line runs from its own lowest reading to its own highest, so a small measure such as returns is as readable as a big one such as revenue. The values at the end of each row say what the heights mean, and each line's accessible name gives its start, end, lowest and highest month.
Is it accessible?
Every row is a heading and its line is an image with a text name; the values are plain text. The range input is the one control, with an accessible name and a readable value. The line, the guide and the dots are hidden from assistive technology where the text already says the same thing. The chart is kept left to right in right-to-left pages, because time runs that way in every language.