Sparkline Range Card Stats Block for React

Edit LOW and HIGH for the range and ANCHORS for the shape of the year (each entry is a week and a position from 0 to 1). The weekly closes are that shape plus a little seeded noise, fitted so the lowest close is exactly LOW and the highest HIGH; replace CLOSES with your own 52 values and everything else is found from them: the dots, the labels, the percent and the list.

It is today's close less the low, over the high less the low, rounded to a whole percent. The headline, the readout and the meter all use that one number. The meter is a drawing, hidden from assistive technology, because the readout beside it says the same in words.

Yes. The line is an image whose name gives the low and the high with how long ago each was, and this week's close. The same numbers are in the list at the start, a description list, and the labels on the hairlines are text. The chart is dir="ltr" and values sit in bdi elements.

The chart uses your theme's text colour at a few weights, with the range lines as plain hairlines, so it is correct in every preset, light and dark, and readable without colour.

The header and the figure fade up once, the line draws from start to end and the dots fade in after it. With reduced motion everything appears at once.

The figure comes right after the header with the same chart and meter, and the list follows. The labels sit on the hairlines at any width and nothing scrolls sideways at 320 pixels.