Lollipop Chart Stats Block for React

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.

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.

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.

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.

The words and chart fade up once on load, the stems grow from the baseline, the dots and counts fade in and the total rolls up when it scrolls into view. With reduced motion all of it is off.

The two parts stack with a rule between them, the plot is a little shorter, and the compact counts keep seven columns readable at 320 pixels. The goal's label is the one word "Goal"; its number is in the list of figures. Nothing scrolls sideways.