Waterfall Chart Stats Block for React

Edit START (the opening total, in thousands) and CHANGES (a long name, a short name for phones and a signed amount each). The closing bar is the sum, so it can't disagree with them. The scale rounds up to the next hundred above the highest running total, so it follows the data. For a different number of changes, change the six-column grid's grid-cols-6 and the SLOT width (100 divided by the number of bars).

Each bar spans from its lowest to its highest value: a total from zero up to itself, a change from the running total before it to the running total after it. The connector at the end of each bar is a hairline at the running total, so a gain's top and a loss's bottom both meet the next bar. The drawing is one stretched graphic of rectangles and lines; the amounts and labels are HTML so they stay crisp.

The drawing is hidden from assistive technology and replaced by a table with one row per step: the step, its signed amount and the running total. The figure's caption lists the opening, the closing and every change in one sentence. Losses use a true minus sign, read as "minus", and the shapes differ (solid, lighter, outline), so nothing depends on colour. A key under the axis explains them.

Whether a change is good depends on the number: a fall in costs is good news. The chart shows direction by position, sign and shape, in your theme's text colour, so it works in every theme and stays readable without colour.

The header and chart fade up once on load, the bars are revealed from the start to the end and the amounts fade in. With reduced motion every transition is off and the finished chart is there.

The plot is shorter and the category names switch to short ones ("Prices", "Online", "Food") so six columns fit at 320 pixels; the amounts above the bars stay. The table still uses the long names. Nothing scrolls sideways.