shadcn.io is not affiliated with official shadcn/ui
Lollipop Chart Stats Block for React Aria
A week of steps as seven thin stems topped by dots, the count above each, a goal hairline and a ring around the peak, in a split with the week's total, the daily average and the days at goal.
Installation
Overview
A lollipop chart for React with React Aria. A split: the words at the start of the reading order, the chart drawn first from lg, a hairline divider between them. The words say which day was the best and how many steps it had, then give the week's total (rolling up once in view), the daily average and how many days reached the 8,000-step goal. The chart is the lightest in the set: seven thin stems, each topped by a dot, the count above every dot, one hairline for the goal and a ring around the peak, whose stem and dot are drawn at full strength while the other stems sit at 35%. A frame with + marks on its corners holds the chart. On a phone the parts stack, words first, with a hairline between them. Every position and figure is computed from one list of daily steps, and the same numbers are a list for screen readers. For habit trackers, fitness and wellness apps, and any chart that should stay quiet.
FAQ
How do I change the steps and the goal?
Edit DAYS (a full name, a short name and the steps for each day) and GOAL at the top of the file. The total, the average, the days at goal, the peak, every stem's height and the headline are computed from them. The tallest day reaches the top of the plot, so there is no ceiling to set.
How is it drawn?
Stems and dots are CSS boxes placed by percentage from the foot of the plot, so the dots stay round at any width, and the count above each is positioned from the same number. Counts are written in a compact form ("12.9K") so seven of them fit across a phone; the exact steps are in the list and the description list.
Is it accessible?
Each day is a list item that reads its weekday and its exact steps ("Saturday: 12,904 steps"); the drawn stems, dots, counts and axis are hidden from assistive technology because the list says the same. The total, average and days at goal are a description list. Numbers sit in bdi elements, and the plot is forced left to right so the week reads from Monday at the start in every language.
Why is the chart first on desktop but second on a phone?
The words come first in the page's reading order, so a screen reader and a phone both meet the headline before the figure. From lg the chart is placed in the first column with grid placement, and the words carry the divider on their start edge. Reading order and tab order don't change.