Burndown Chart — Prototype

Sprint burndown chart. Red bars = remaining work. Blue diagonal gradient = ideal burn rate. CSS-only, no JavaScript.

Sprint 3 burndown — 20 issues over 10 days
D1	19
D2	17
D3	15
D4	12
D5	11
D6	8
D7	7
D8	4
D9	2
D10	1

Markup

<table data-chart="burndown">
  <caption>Sprint burndown</caption>
  <tbody>
    <tr><th scope="row">D1</th><td style="--size: 0.95">19</td></tr>
    <tr><th scope="row">D2</th><td style="--size: 0.85">17</td></tr>
    <!-- ... -->
  </tbody>
</table>

The ideal line

The blue diagonal is a linear-gradient on tbody::after. It represents ideal burn rate: if the team burns at constant velocity, the remaining work should trace this diagonal. Where red bars are ABOVE the line, the team is behind. Where bars are BELOW, they are ahead.

The prototype shows a healthy sprint: the team started slightly slow (D1-D4 above line) but recovered by D5-D10.