ErrorBudget

A checkout SLO has 62% of its error budget left on day 12 of 30. ErrorBudget plots that remaining line against the steady-burn diagonal, the pace that exactly spends the window, so "too fast" becomes a position: below the diagonal means you are outrunning the budget. Faster burn-rate reference lines sit below it as faint policy context. The 1×/6×/14.4× multipliers are the Google SRE Workbook's multiwindow burn-rate alert convention rather than physics, so rates is configurable and the lines never render data-colored.

Install

import { ErrorBudget } from "@microcharts/react/error-budget";// remaining — real values under “Sample data” below<ErrorBudget data={remaining} window={30} title="Checkout SLO" />

// 12 days into a 30-day SLO window, burning slightly under the steady rateconst remaining = [1, 0.96, 0.93, 0.9, 0.86, 0.83, 0.79, 0.75, 0.71, 0.67, 0.64, 0.62];

Try it

When to use it

Use it for an SLO error budget in a KPI card, a service list where each row is a budget, and spotting a fast burn before it exhausts the window. For a plain uptime series use Sparkline; for a one-number budget use Progress.

Sizing

Variants

format defaults to a percent formatter, and with locale it follows that locale's own conventions for the remaining-budget label: "62 %" with a space before the sign under de-DE, rather than the English "62%".

Edge cases

With no data the chart renders an empty root and the accessible name says "No data." A single point still draws the diagonal, the wedges, and the endpoint, though currentRate reads 0, since it needs a prior step: it is the observed burn slope over the last max(2, ⌈n/6⌉) steps divided by the steady slope. Once the remaining line reaches zero, an ✕ at that first zero-crossing replaces the endpoint dot and the summary reads "Budget exhausted at day 7 of 20." instead of the usual remaining-and-rate sentence. Values are clamped to 0–1, so nothing draws below the floor or above a full budget.

Four homes

Accessibility

The accessible name states the budget, the elapsed window, and the burn rate: "62% of error budget remains at day 12 of 30 — burning at 0.6× the steady rate." An exhausted window reads "Budget exhausted at day N of M." The interactive entry steps the days and announces each step's remaining budget and local burn rate.

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

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.