Slope Chart Stats Block for React

Edit CLUBS at the top of the file: a name, a short name for phones and a rank after each quarter (1 is the top, and each rank should appear once on each side). Each place is 3 rem tall, so set the plot's height (h-72 for six) to the number of places times 3 rem. The lines, the labels, the changes and the headline are computed from the ranks.

By weight, line style and glyph: a climb is a 2 px solid line with solid dots, a bold club name and an up arrow; a slip is a 1 px dashed line at 55% with lighter dots and a down arrow. A club that held its place would get a dash glyph and, with no climb to show, the slip style of line. The key under the chart shows the two line styles.

The drawing and its labels are hidden from assistive technology and an unseen table lists every club with its two ranks and the change in words ("up 2", "down 3"), in the order of the second ranking. The figure's caption names the chart. The plot is forced left to right so Q1 stays at the start in every language, and the arrows point up and down, so they never mirror.

The gutters narrow to 5 rem, the club names switch to their short forms and each end label wraps so the arrow and number sit under the name. The plot keeps its height, so the lines stay readable at 320 pixels. The lines draw in from the start once on load; with reduced motion they are simply there.

Ranks are whole places, so give tied clubs different places, or change yOf to use fractional ranks (a tie at 2 and 3 is 2.5 for both). The labels are laid out one per place, so a tie on the same place would overlap; the unseen table would list both.