shadcn.io is not affiliated with official shadcn/ui
Linked Small Multiples Gallery Block for Solid
The same twelve months drawn six ways on shared hairlines, with a Month slider (and the pointer over any chart) that highlights that month in all six and reads out its value, share and rank.
Installation
Overview
Small multiples for Solid with Ark UI. A centred header sits over a band with one Month slider, then six charts of the same twelve months of reports sent on shared hairlines, three across from a tablet and two on a phone: bars, a line, an area, dots, a donut of shares and a heat strip. The slider picks a month and that month is highlighted in all six at once; pointing at a month in any chart does the same. The band reads out the month in words: its value, its share of the year and its rank. The charts are drawn from the data with boxes, one stretched line path and circle arcs, in the theme's foreground at a few strengths. They are hidden from screen readers, which get one table of the twelve readings after them. The figures are example data. It's built from Guides and Slider. For reporting tools and dashboards.
FAQ
What is linked about the charts?
They share one picked month. Dragging the slider, or pointing at a month in any chart, highlights that month in every chart and updates the sentence in the band.
Can I do it without a mouse?
Yes. The slider takes the arrow keys, Home and End, and moves the highlight in all six charts; its value text reads the month and its count. Pointing at a chart is only a second way to pick, so nothing is hover-only.
How do I use my own data?
Edit the MONTHS list: each entry is a month and a value. The chart scale, the paths, the arcs, the heat steps, the shares and the ranks are all computed from it, and so is the table for screen readers.
How do screen readers get the charts?
Each drawing is hidden from them. A table after the charts lists every month, its reports and its share of the year, and a polite line announces the picked month.