# Canary Rollback block

> Canary latency chart with stacked baseline and regression columns, breach stats and a rollback track

Canary latency for a rolled-back release, one stacked column per sample: the old version's baseline, the regression and the excess past a dashed limit, under a stage track ending on the rollback. Percentile switch, layers, replay and CSV export.

- Type: Pro block
- Category: [Composed Chart](https://web.dev.reui.io/blocks/chart/composed-chart.md)
- Page: https://web.dev.reui.io/blocks/chart/composed-chart/chart-37
- MCP: `get_block("chart-37")`
- Built with: Badge, Button, Button Group, Chart, Dropdown Menu, Frame, Icon Tile, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A post-incident read of one rolled-back release: how much latency it added per sample over the old version, and how far past the limit

## Agent notes

- `releaseP95` in data.ts holds the measured p95 per sample, and `plotRows` derives p50 and p99 from it through each `PERCENTILES` `ratio` and `slope`
- `plotRows` splits every column into `base`, `under` and `over` against the percentile's `limit`; `SEGMENT_TONES` in value-faces.tsx colours all three
- `MOTION_STYLE` raises the columns in one sweep on mount and on Replay; a percentile switch only crossfades, and reduced motion keeps a short fade

## When not to use

- Releases still moving through their stages, with live meters and Promote gates: use [Release Lanes](https://web.dev.reui.io/blocks/chart/status-tracker/chart-38.md) (`get_block("chart-38")`)
- An SLO error budget spent down day by day with a forecast of when it runs out: use [Error Budget Burn](https://web.dev.reui.io/blocks/chart/bar-chart/chart-42.md) (`get_block("chart-42")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

## About Composed Chart blocks

### When to use

- Bars and a line on one time axis, such as revenue and opex columns under an operating margin line
- A measure against its goal or limit, such as closed sales against a dashed goal or latency past a limit
- Cash or liquidity flowing in and out by period, over the balance those flows add up to

### When not to use

- One volume series alone, with no goal or baseline to compare against: use the [Area Chart blocks](https://web.dev.reui.io/blocks/chart/area-chart.md)
- Two or more series drawn only as strokes across shared time buckets: use the [Line Chart blocks](https://web.dev.reui.io/blocks/chart/line-chart.md)

### Agent notes

- Every block plots in a recharts `ComposedChart` in the shadcn `ChartContainer`; a new series is one more `Bar`, `Area` or `Line` child with a `dataKey`

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.