# Error Budget Runway block

> Live error budget runway slope chart with traffic weighted lines and a current or baseline switch

Services ranked by traffic slope to their days of error budget left, re-sorting live as burn drifts, below 4 fleet stats with an inspector footer and CSV export. ReUI Frame, Badge; shadcn ToggleGroup, Progress; Recharts. SRE wallboard.

- Type: Pro block
- Category: [Slope Chart](https://reui.io/blocks/chart/slope-chart.md)
- Page: https://reui.io/blocks/chart/slope-chart/chart-50
- MCP: `get_block("chart-50")`
- Built with: Badge, Button, Chart, Dropdown Menu, Frame, Progress, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

A fleet wallboard of which services break their SLO first and how much traffic that puts at risk, with tier counts that tick live

## Agent notes

- Replace `SERVICES` in data.ts with your traffic, SLO, budget left and burn rates; `burnAt` fakes the live drift with a sine wave per service
- A `setInterval` every `LIVE_INTERVAL_MS` bumps `tick`, and `StatStrip` diffs `runwaysAt` against the tick before, so a real feed must keep its last snapshot
- `exportCsv` and `copySummary` confirm through sonner `toast`, so mount a Toaster, and the summary hardcodes the 7 day cutoff of `tierOf`

## When not to use

- One objective's daily burn down with a forecast tail and a drag that sums spend: use [Error Budget Burn](https://reui.io/blocks/chart/bar-chart/chart-42.md) (`get_block("chart-42")`)
- A list of objectives, each row with a budget pin, a 28 day trend and a create dialog: use [SLO Budgets](https://reui.io/blocks/chart/sparkline/chart-44.md) (`get_block("chart-44")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/chart-50
```

## About Slope Chart blocks

### When to use

- Rank shifts between 2 orderings of the same items, with each line weighted by the item's volume
- An SRE wallboard that ranks services by traffic against the days of error budget each has left
- A growth review that ranks acquisition channels by signups against the share of users each keeps

### When not to use

- Exact values for several series traced across many dates on a shared time axis: use the [Line Chart blocks](https://reui.io/blocks/chart/line-chart.md)
- Volumes that merge and split as they flow from sources into costs, stages or outcomes: use the [Sankey Chart blocks](https://reui.io/blocks/chart/sankey-chart.md)
- One value per item at a single moment, compared by length with no change in rank: use the [Bar Chart blocks](https://reui.io/blocks/chart/bar-chart.md)

### Agent notes

- `Chart` takes no props and fetches nothing, so every item, rank and value derives from constants in the block's data.ts
- Each item is a Recharts `Line` whose `dataKey` is its id and whose values are row indexes, bent into an S-curve by a custom `shape`
- Export CSV and the copy action confirm with sonner `toast`, so the app needs a mounted Toaster for either message to show

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.