ErrorBudget

ErrorBudget answers "are we burning the error budget too fast to survive the window?". The budget remaining rides against the steady-burn diagonal — the pace that exactly spends the window — so "too fast" is legible at a glance: below the diagonal means you're outrunning your budget. Faster burn-rate reference lines (the Google-SRE 1×/6×/14.4× convention, not physics) sit below it as faint policy context.

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

• Good for — an SLO error budget in a KPI card, a service list where each row is a budget, spotting a fast-burn before it exhausts the window.
• Avoid for — a plain uptime series (Sparkline) or a one-number budget (Progress).

Sizing

Variants

format defaults to a percent formatter; with locale it follows that locale's own conventions for the remaining-budget label — "62 %" (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, wedges, and endpoint, though currentRate (which needs a prior step) reads 0. 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 normal remaining/rate sentence. Values are clamped to 0–1, so nothing is ever drawn below the floor or above a full budget.

Four homes

Why this default

Remaining-vs-diagonal, because "too fast" is only legible against the pace that exactly spends the window. The 1×/6×/14.4× reference lines are the SRE Workbook's multiwindow burn-rate alert convention — a policy default, never universal law — so rates is configurable and the lines render as faint background context, never data-colored. currentRate is the observed burn slope over the last max(2, ⌈n/6⌉) steps ÷ the steady slope; when the budget hits zero, an ✕ marks the crossing and the summary says so.

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 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.