BurnChart

Molecule

An SLO burn view on the Chart primitives: the error budget remaining with a projection that runs to zero at the recent pace, the burn rate with the alerting tiers as labelled thresholds (the SRE workbook's 14.4 / 6 / 3 / 1 by default), and annotations such as a deploy or an incident. Colour is not the only signal: tiers and annotations carry text, the projection is dashed, and a text summary states the budget, the active tier and the projected exhaustion.

Budget and burn rate, with annotations

Preview

Error budget remaining: 48.9% (healthy). Budget runs out 21 Oct 2026. Burn rate: 5.2×. At or above the Ticket 3× (1 d) threshold. 2 annotations.

  • Error budget remaining
  • Projected at the recent pace
  • Burn rate
  • Page 14.4× (1 h)
  • Page 6× (6 h)
  • Ticket 3× (1 d)
  • Ticket 1× (3 d)
Code
<BurnChart budget={budget} burnRate={burnRate} windowEnd="2026-10-31" annotations={annotations} />

Budget only, custom tiers

Preview

Error budget remaining: 48.9% (healthy). Budget runs out 21 Oct 2026.

  • Error budget remaining
  • Projected at the recent pace
Code
<BurnChart budget={budget} projection={{ lookbackMs: 4 * 86_400_000 }} />

Burn rate only, two tiers

Preview

Burn rate: 5.2×. At or above the Ticket 2× (1 d) threshold.

  • Burn rate
  • Page 6× (1 h)
  • Ticket 2× (1 d)
Code
<BurnChart burnRate={burnRate} tiers={[{ id: 'p', label: 'Page', rate: 6, tone: 'error' }]} />
Sourcemodules/ui/Chart/charts/BurnChart.tsx