Dual Series Area Chart Stats Block for React

Edit MADE and USED at the top of the file: one reading in kilowatts for each of the 24 hours, midnight first. Every line, fill, hatched span, total and the chart's accessible name is computed from them. If your values exceed 6 kW, raise CEILING and the GRIDLINES.

The day is read eight times an hour and wherever generation is above use the top edge follows generation and the bottom edge follows use. A crossing inside a step is found exactly, because both lines are straight between two hours. The result is a CSS clip-path polygon in percent over a hatched layer, so the hatching keeps its angle and spacing at any width.

By weight, width and dash: generation is a 2 px solid line at full strength over a 12% fill, use is a 1.5 px dashed line at 55% over a 6% fill, and the surplus is hatching. The legend repeats all three marks.

The chart is an image with a text name that states where generation starts, peaks and ends, the range of use and when generation is above use. The totals are a description list and the hourly table is there for screen readers. Axis labels are text, values sit in bdi elements, and the chart stays left to right in right-to-left pages.

The lines draw from the start to the end, the fills and the hatching fade in, and the totals roll up when they scroll into view. With reduced motion each of these is off and the finished chart is simply there.

The chart becomes 4:3 instead of 16:6, the legend wraps under the title and the three totals stack one per row between hairlines. Nothing scrolls sideways at 320 pixels.