# Error Budgets block

> SLO error budget card with concentric radial rings per objective, burn rate and a service switch

Error budget card for one service: four striped concentric radial rings of the budget each objective has left, beside a table of target, attainment, budget bars, burn and status. ReUI Frame, Badge, shadcn Chart, Table, Select.

- Type: Pro block
- Category: [Radial Chart](https://web.dev.reui.io/blocks/chart/radial-chart.md)
- Page: https://web.dev.reui.io/blocks/chart/radial-chart/chart-7
- MCP: `get_block("chart-7")`
- Built with: Badge, Button, Chart, Dropdown Menu, Empty, Frame, Progress, Select, Skeleton, Table, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

One service's error budgets as concentric radial rings, with attainment, burn rate and status per objective

## Agent notes

- Replace `SERVICES` in data.ts; each objective carries a `target`, its attainment per window and over the last 24 hours
- `objectivesOf` derives budget left, burn and status; `RISK_LEFT` in slo-view.ts sets where at risk begins
- `TONE` in value-faces.tsx colours each objective's ring, dot and bar; `SPOTLIGHT` there fades the other rings and rows, so keep its class literals per key

## When not to use

- Several API readings in one strip, each led by a small ring gauge: use [API Health](https://web.dev.reui.io/blocks/chart/radial-chart/chart-8.md) (`get_block("chart-8")`)
- A half circle split into the shares of one total, with the sum inside the arc: use [Inflows Gauge](https://web.dev.reui.io/blocks/chart/radial-chart/chart-12.md) (`get_block("chart-12")`)

## 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-7
```

## About Radial Chart blocks

### When to use

- Error budget left per SLO objective as concentric rings beside burn rate and status
- A row of round meters, one per API or service metric, each with a trend delta
- Cash settled over a period on a radial day clock against a target ring

### When not to use

- Several sources sharing one total, read as slices of a ring: use the [Pie Chart blocks](https://web.dev.reui.io/blocks/chart/pie-chart.md)
- A capacity or allocation meter laid out as straight segments in a row: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)

### Agent notes

- chart-7 draws concentric rings with recharts `RadialBarChart`, chart-8 builds each gauge from SVG `line` ticks, and chart-12 draws its day clock as plain SVG

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