Area Chart Hero Stats Block for React

Edit MONTHS and SALES at the top of the file: one reading per month, oldest first, the last being the month the figure reports. The headline names the month with the highest reading, the figure is the last reading, the change is computed against the reading before it, and the curve is drawn from all of them, so nothing else needs editing. The month names have no year, so the copy never goes stale. Add or remove months and the curve and the labels follow.

The readings are scaled into a 100 by 100 box with the axis starting at zero, and a small helper turns them into a smooth path that bends between readings without ever overshooting one. The box stretches to the band (preserveAspectRatio="none" with a non-scaling stroke, so the line stays two pixels thick at any width). The highest month stands about half way up, which keeps the top corner free for the figure. The end dot and the month names are HTML placed from the same numbers, so they stay round and crisp while the box stretches.

The fill is its own SVG inside a wrapper with a CSS mask that fades from the middle to nothing at the foot. The line is a separate SVG on top, outside the mask, so even the lowest months keep a whole line. That is also why the month names read cleanly: they sit where the area has faded away.

The chart is an image whose name gives the span, the first and last readings and the low and high with their months. The month's figure is a description list, label then value then change, and the arrow is hidden from assistive technology because the sign says the same; a fall would use a true minus sign. The values sit in text, not in the drawing, and the month names are hidden from assistive technology because the image's name already carries them. With reduced motion the number is shown at once and the line is drawn already complete.

Time runs the same way in every language, so the chart box is kept left to right and the oldest month stays at the start of the box. The figure on top follows the page direction, and the sign and percentage are kept left to right so a plus or minus never ends up on the wrong side.

The header and the chart fade up once when the page loads, the line draws from start to end with a CSS clip-path transition, and the area fades in behind it. With reduced motion all of that is off and the chart simply appears. On a phone the chart becomes a 4:3 box, the figure shrinks a size, and only every third month is named, so the labels never crowd. Nothing scrolls sideways at 320 pixels.