Gradient Fill Area Chart Stats Block for React

Edit MONTHLY (dollars taken in each month) and MILESTONES_AT at the top of the file. The running totals, the curve, the dots, the labels and the headline are computed from them. If the total goes past $120K, raise CEILING and the GRIDLINES.

The area is filled with the text colour at 30% and a CSS mask fades it from full strength under the line to 55%, 20% and then nothing at the foot of the chart. There is no gradient definition, so nothing needs a unique id, and the fade works in any theme.

For each total the block finds the first month whose running total reached it, then interpolates along the straight segment the chart draws between that month and the one before. The dot's position and the label's position are the same percentages, so they stay with the curve at any width.

The chart is an image with a text name that gives the start, the end and the month each milestone was crossed. On a phone the milestones are a visible list; from sm the same list stays for screen readers while the labels above the dots are decorative. The total and the last month are a description list, values sit in bdi elements and the chart stays left to right in right-to-left pages.

The curve draws from the start to the end, the fill fades in and the total rolls up when it scrolls into view. With reduced motion all of it is off and the finished chart is simply there.

The chart is 3:2 instead of 2:1 and the labels above the dots give way to a list of three rows under the chart. The card keeps its shell, and nothing scrolls sideways at 320 pixels.