Burndown Chart Card Stats Block for React

Edit DAYS, COMMITTED, REMAINING (the points left at the end of each day so far, starting with the plan on day zero), SCOPE (the day points were added and how many) and CEILING. Today is the last reading, so adding a day moves the dot, the shaded gap, the three figures and the headline together. The ideal is a straight line from COMMITTED to zero over DAYS.

Scope added in the sprint makes the actual line rise instead of fall, as on day 5 here. The block also marks the day with a hairline and a label ("+6 points") so a rise is never read as slow work. The ideal line stays the original plan; if your team re-baselines the ideal when scope changes, replace idealOn with your own function.

The shaded area between the lines is foreground at a low weight, so it reads in every theme and without colour. Whether being behind is bad depends on the team, so the block states the number in words and leaves the judgement to the reader.

Yes. The drawing is an image whose name gives the points committed, the points remaining against the ideal and the scope that was added. The three figures under it are a description list that repeats the numbers, the legend is text, and the digits are in bdi elements. The chart box is dir="ltr" because time runs from the start to the end in every language.

The header and the card fade up once and the lines draw in from the start; the three figures roll to their values when the panel scrolls into view. With reduced motion everything simply appears. On a phone the chart takes a 4 by 3 shape, shows every other day label and the three figures stack as rows.