BurnChart
Sprint plan against actual, with a dotted linear projection to the deadline and the signed schedule gap.
- encodes
- actual line vs the plan line + projected landing gap
- precision
- high for history, low-deliberate for the dotted projection
- nodes
- ≤ 7
Six days into an eleven-day sprint, 19 points are done against 20 planned. BurnChart draws the plan line (dashed,
full length to the deadline), the actual line to today, and a dotted projection whose slope is a plain linear
fit over the last max(2, ⌈actual/3⌉) actual points. History is solid and exact; the projection is dotted and muted,
and its method is stated rather than smoothed into an optimistic curve. The gap label states the signed schedule
landing.
Install
import { BurnChart } from "@microcharts/react/burn-chart";// plan, actual — real values under “Sample data” below<BurnChart data={{ plan, actual }} title="Sprint 12" />Sample data
// an 11-day sprint burning down; 6 days in, slightly behind → projected 2 days lateconst plan = [40, 36, 32, 28, 24, 20, 16, 12, 8, 4, 0];const actual = [40, 35, 31, 27, 24, 21];Try it
When to use it
Use it for a sprint burndown in a tab header, will-we-finish in a KPI card, and plan vs actual with a projected landing. For a single progress number use Progress; for a plain series use Sparkline.
Sizing
Variants
With a locale, the accessible summary's numbers follow that locale's own grouping — "2.300" in German, not "2,300".
Edge cases
With no plan (plan: []), the projection still runs, since the fitted slope only needs actual, but there is no plan
to compare against, so the summary drops the "vs planned" clause. A stalled burn (actual flat) never reaches zero, so
finishes is false and the summary says so outright ("not finishing at the current pace") rather than extrapolating a
landing date. A single actual point draws no projection at all: the fit needs at least two.
Four homes
Accessibility
The accessible name states progress against the plan and the projected landing — "6 of 11 days in: 19 points done vs 20 planned — projected to finish 2 days late.". The interactive entry steps the days; history announces actual vs plan, and the dotted region announces the projection.
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { plan: number[]; actual: number[] } | Remaining work per period (mode='down') or completed (mode='up'). |
| mode | "down" | "up" | Burn-down (remaining → 0, default) or burn-up (done → scope). |
| projection | boolean | The dotted extrapolation to the deadline (default true). |
| work | string | Work-unit noun for the summary and readout. Defaults to `strings.burnWork` ('points' in EN), so a localized bundle replaces it. |
| unit | string | Period noun for the summary and gap label (default 'day'). |
| label | "gap" | "none" | Signed schedule landing vs the deadline in a right gutter. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.