Sparkline Hero Metric Stats Block for React

Edit CASH and BURN for today's reading and ANCHORS for the shape of the 90 days: each entry is a day and a runway in months, and the days between are drawn on straight lines between them with a little seeded noise (a fixed sequence, so the server and the browser draw the same line). Replace readingsOf with your own array of 90 readings if you have real data; the high, the low, the marks and the headline are found from it.

They are the series' highest and lowest readings, found when the module loads. Each is a hollow dot and a label positioned in HTML from the same coordinates as the line; a label near an edge is aligned to that edge so it never spills out of the box.

Yes. The figure is a description list. The line is an image whose name gives where it starts, its high and its low with how long ago each was, and today's value. The dots and labels are text beside it, and the box is dir="ltr" because time reads from the start to the end in every language.

Direction is told by an arrow and a sign, and the chart is in your theme's text colour at two weights, so it works in every preset, light and dark, and without colour.

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

The two cells stack, the figure first, with a hairline between them; the line keeps its height and runs the full width.