Data viz
Burndown / burnup
The sprint-tracking chart. Burndown plots work remaining against an ideal pace line; burnup plots work completed against the total scope — so mid-sprint scope creep is visible rather than hidden. Toggle between the two, hover any day for the numbers. Built on the shared Orbit chart scaffolding.
npx shadcn@latest add @orbit/burndown-chartOverview
Sprint 24 with scope creep on days 5 and 8. Switch Burndown / Burnup, and hover a day to read points remaining or completed against scope.
Two readings
Same sprint, two lenses. Burndown answers “are we on pace to finish?”; burnup adds “did the goalposts move?” by drawing scope as its own line.
Controlled
Hide the built-in segmented control with showToggle={false} and drive the mode from outside via mode + onModeChange.
mode="burndown"Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { days: string[]; scope: number[]; remaining: number[]; completed: number[] } | — | One entry per day: total scope, points remaining (burndown line), and points completed (burnup line). |
| mode | "burndown" | "burnup" | — | Controlled mode. Pair with onModeChange. |
| defaultMode | "burndown" | "burnup" | "burndown" | Uncontrolled initial mode. |
| onModeChange | (mode) => void | — | Fires when the segmented toggle (or a controlled parent) switches modes. |
| title | string | "Sprint 24" | Card heading; the active mode label is appended. |
| subtitle | string | — | Overrides the per-mode subtitle copy. |
| unit | string | "pts" | Unit suffix in stats and tooltip values. |
| height | number | 270 | Plot height in px. Width is responsive. |
| showToggle | boolean | true | Segmented Burndown / Burnup control in the header. |
| showStats | boolean | true | Completed / progress / remaining stats row. |
| showLegend | boolean | true | Bordered legend row under the plot. |
| ariaLabel | string | — | Plain-language summary for the chart's role=“img”. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root card, including ref and className. |
Usage
Use it for a fixed-length sprint with an estimate-based backlog. For flow over time across statuses, the Cumulative Flow chart is the better tool.
Show the ideal line
The diagonal reference is what makes the actual line meaningful — without it, “30 points left” says nothing about pace.
Hide scope changes
If work is added mid-sprint, a burndown can look fine while you fall behind. A burnup’s scope line keeps it honest.
Use consistent units
Points or count — pick one and label the axis. Mixing estimates and task counts makes the slope a lie.
Read too much into one day
Daily wobble is normal. Judge the trend across the sprint, not a single dip or plateau.
Keyboard & accessibility
The chart renders as a labelled image; the toggle is a group of pressed buttons and every reference line is named — and dashed — in the legend.