# Shadcn Slope Chart blocks

> Slope charts for rank shifts between 2 orderings of the same items, with weighted lines, hover tracing and animated re-sorts.

- Type: Pro blocks (Charts)
- Page: https://reui.io/blocks/chart/slope-chart
- Blocks: 2
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

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

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/), used by 2 of 2 blocks
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 2 of 2 blocks (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), used by 2 of 2 blocks

## Blocks

- [Error Budget Runway](https://reui.io/blocks/chart/slope-chart/chart-50.md): Live error budget runway slope chart with traffic weighted lines and a current or baseline switch. 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.
- [Retention Crossover](https://reui.io/blocks/chart/slope-chart/chart-51.md): Channel retention slope chart with a day ruler re-ranking channels from signups to Day N retention. Best for a Play tour that lingers where the retention order swaps, plus rings on the traced line at each channel it passes or is passed by.

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.