# Transit vs Target block

> Diverging road and rail transit bar chart by region, ahead of or behind target on a live feed

Road and rail lanes per region as capsules growing from the target line, ranked by gap and nudged by a live carrier feed. Median or P90 toggle, sort and overlay menus, CSV export. ReUI Frame, Badge; shadcn Chart, ToggleGroup. For logistics SLAs.

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

## Best for

Lane gaps to a delivery target where regions rerank on a Median or P90 switch and 2 lanes report fresh readings every few seconds

## Agent notes

- Replace `regions` and `TARGETS` in data.ts; each mode needs `median`, `p90`, `prior`, `shipments` and `onTime` for its region
- `advanceFeed` fakes readings with a sine drift on 2 lanes every `FEED_INTERVAL`, so swap it for your carrier events
- `GAP_LIMIT` is read once from the opening `regions`, so a gap past it pins to the end of the scale

## When not to use

- Units sold per category, each bar toned by its days of supply: use [Inventory Velocity](https://web.dev.reui.io/blocks/chart/bar-chart/chart-29.md) (`get_block("chart-29")`)
- Several series compared over time, picked by a time range select: use [Social Engagement](https://web.dev.reui.io/blocks/chart/line-chart/chart-23.md) (`get_block("chart-23")`)

## Third-party libraries

- 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)
- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/), through shadcn Chart

## Install

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

## About Bar Chart blocks

### When to use

- Amounts compared across years, weeks, categories or regions as prisms, patterned bars, pills or lanes
- Activity over time stacked by outcome, such as job runs, audit events, firewall requests or data syncs
- Run durations and error budgets read against a timeout, a warning line or a paging threshold

### When not to use

- A share of a whole where the slices read better around a ring: use the [Pie Chart blocks](https://web.dev.reui.io/blocks/chart/pie-chart.md)
- A capacity or allocation split into colored segments on one meter, with no axis: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)
- Rows of jobs or deploys, each with its own run history strip: use the [Status Tracker blocks](https://web.dev.reui.io/blocks/chart/status-tracker.md)

### Agent notes

- `Chart` renders with no props and fetches nothing, so every bar, lane and limit is seeded from constants in the block folder

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.