# Metric Switcher block

> Metric switcher trend chart with KPI tiles, a previous-period ghost line and event annotations

Storefront metrics card where four KPI tiles (orders, revenue, active users, p95 latency) switch one daily area trend, read against the previous period as a dashed line, with release and sale annotations, 7D to 90D ranges and CSV export.

- Type: Pro block
- Category: [Line Chart](https://web.dev.reui.io/blocks/chart/line-chart.md)
- Page: https://web.dev.reui.io/blocks/chart/line-chart/chart-6
- MCP: `get_block("chart-6")`
- 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 few headline KPIs that each open the same daily trend, compared with the period before, with dated events marked on the plot

## Agent notes

- `dayAt` in data.ts generates the demo; replace `DAYS` with real daily rows keyed by every `MetricKey`, oldest first, ending on `REFERENCE_DAY`
- Each `METRICS` entry sets its tile `rollup` (sum or mean) and `better`; where `better` is down, as on latency, a drop reads as good news
- `SERIES_MOTION` morphs both series on a metric or range switch because `plotRows` caches one array per option; never key the chart to redraw it

## When not to use

- A whole call analytics page with 6 metric buttons, ranked agents and integrations: use [Voice Agent Calls](https://web.dev.reui.io/blocks/application/dashboard/dashboard-4.md) (`get_block("dashboard-4")`)
- One metric studied in depth against a target, with a cohort breakdown and a changes log: use [Metric Deep Dive](https://web.dev.reui.io/blocks/solutions/analytics/solution-analytics-8.md) (`get_block("solution-analytics-8")`)

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

## About Line Chart blocks

### When to use

- A balance, price or revenue trend as a single stroke with period tabs and a peak marker
- Several platforms or channels compared as separate strokes on one time axis
- Two measures on different scales plotted against left and right axes

### When not to use

- A trend that needs its volume emphasized with a filled region below it: use the [Area Chart blocks](https://web.dev.reui.io/blocks/chart/area-chart.md)
- Compact tiles where each figure carries a small trend of its own: use the [Sparkline blocks](https://web.dev.reui.io/blocks/chart/sparkline.md)

### Agent notes

- Series colors live in the `ChartContainer` config; chart-6 and chart-26 plot in a `ComposedChart` with an `Area`, the others in a `LineChart`

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.