# Freight Transit Times block

> Grouped air vs sea freight bar chart with hover-dimmed bars and live region readout

Grouped bar chart comparing air vs sea freight transit days across global regions, with hover that dims other bars, a live region readout, custom tooltip, and trend badge. ReUI Frame, Badge; shadcn Chart on Recharts. Logistics shipping dashboard.

- Type: Pro block
- Category: [Bar Chart](https://reui.io/blocks/chart/bar-chart.md)
- Page: https://reui.io/blocks/chart/bar-chart/chart-30
- MCP: `get_block("chart-30")`
- Built with: Badge, Frame
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Paired air and sea bars per region where hovering one region dims the rest and turns the subtitle into its readout

## Agent notes

- Replace `chartData` regions and their `air` and `sea` values in data.ts; the subtitle readout appends d and the tooltip appends days to each value
- `activeIndex` is set only by the `onMouseEnter` of each `Cell` and cleared by `onMouseLeave`, so keyboard focus never dims bars or swaps the subtitle
- The -8.4% trend `Badge` is fixed text, not computed from `chartData`

## When not to use

- One series per category with a hatched fill and a reveal on load: use [Inventory Velocity](https://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://reui.io/blocks/chart/line-chart/chart-23.md) (`get_block("chart-23")`)

## Install

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

## About Bar Chart blocks

### When to use

- Values compared across hours, days or categories as grouped, stacked or hatched columns
- Run durations or event volumes against a timeout or limit line, with outcome toggles
- Segmented meters that split a capacity, a fund or a heart rate zone into colored slices

### When not to use

- A share of a whole where the slices read better around a ring: use the [Pie Chart blocks](https://reui.io/blocks/chart/pie-chart.md)
- A progress reading shown as an arc gauge with a status label: use the [Radial Chart blocks](https://reui.io/blocks/chart/radial-chart.md)
- Rows of jobs or deploys, each with its own run history strip: use the [Status Tracker blocks](https://reui.io/blocks/chart/status-tracker.md)

### Agent notes

- `Chart` renders with no props, so every bar, meter value and limit comes from constants kept in the block folder

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.