<burndown-chart>
Sprint burndown plot. Wraps
Overview
The <burndown-chart> component plots sprint progress as a two-series line chart: the actual remaining work each day vs. the ideal straight-line trend from total → 0 across the sprint duration.
It composes <chart-wc type="line"> for rendering. The author supplies only the daily remaining counts (and optional scope-change deltas) — the ideal slope is mechanical and should not be hand-computed in author data.
Data source
Provide a <template> child whose <tr> rows have these cells in order:
- date — ISO 8601 (
YYYY-MM-DD) - remaining — number of points/items left at end of day
- (optional) ±delta — scope change applied that day (e.g.
+5or-2)
<burndown-chart start="2026-05-04" end="2026-05-15" total="42" label="Sprint 14"> <template> <tr><td>2026-05-04</td><td>42</td></tr> <tr><td>2026-05-05</td><td>40</td></tr> <tr><td>2026-05-07</td><td>32</td><td>+5</td></tr> <tr><td>2026-05-08</td><td>28</td></tr> </template></burndown-chart>
Days with a non-zero 3rd cell are surfaced as a Scope changes aside under the chart so the cause of trend reversals is visible at a glance.
Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
start | string | — | Sprint start date (ISO 8601, required) |
end | string | — | Sprint end date (ISO 8601, inclusive, required) |
total | number | — | Total points/items at sprint start (required) |
unit | string | — | Display unit, default "points" |
label | string | — | Optional heading text (e.g. "Sprint 14") |
weekends | "include", "exclude" | — | Whether weekends count toward the ideal-line slope |
Excluding weekends
By default, the ideal line decrements every day equally. For sprints where weekends don't count, set weekends="exclude" — the component holds the ideal value flat over Saturdays and Sundays so the slope reflects working-day capacity:
<burndown-chart start="2026-05-04" end="2026-05-15" total="30" weekends="exclude"> <template>...</template></burndown-chart>
Progressive Enhancement
- HTML. Without JS, the
<template>child is invisible (templates do not render). The chart is purely additive over<chart-wc>. - CSS. The
:not(:defined)selector keeps the host visible pre-upgrade. - JS. Reads the template, computes the ideal series, builds a
<chart-wc>with two series, and surfaces scope changes as a sibling<aside>.
This component requires the optional vanilla-breeze-charts bundle for <chart-wc>:
<link rel="stylesheet" href="/cdn/vanilla-breeze-charts.css"><script type="module" src="/cdn/vanilla-breeze-charts.js"></script>
Related
<chart-wc>— Underlying renderer.<gantt-chart>— Task-level scheduling with dependencies.<iron-triangle>— Sprint capacity / scope / time constraint visualization.