# Sales vs Traffic block

> Dual-axis sales vs traffic line chart with period compare, line color pickers and store KPIs

Storefront sales and product views over 30 days, 13 weeks or 12 months, with previous period lines, per line color pickers, sales, views, conversion and order value KPIs, CSV or JSON export. shadcn Card, Chart, ToggleGroup. For e-commerce analytics.

- 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-24
- MCP: `get_block("chart-24")`
- Built with: Badge, Button, Button Group, Card, Chart, Color Picker, Dialog, Dropdown Menu, Separator, Spinner, Toggle, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Sales against product views on 2 value axes, where a Compare toggle overlays the previous period and each line wears a picked color

## Agent notes

- Replace `buildDays` in data.ts with your daily feed; `RANGE_VIEWS` buckets it into 30 days, 13 weeks and 12 months beside the previous period
- `COLOR_DEFAULTS` must match the light theme colors in `COLOR_SCOPE`, or a picker opens on a color its line does not wear
- The `refresh` action only remounts `TrendPlot` to replay the draw, so wire it to refetch your analytics

## When not to use

- Deals flowing through funnel stages by lead source, with the biggest leak called out: use [Pipeline Leakage](https://web.dev.reui.io/blocks/chart/sankey-chart/chart-53.md) (`get_block("chart-53")`)
- Monthly sales measured against a goal line with a dated marker: use [Sales vs Goal](https://web.dev.reui.io/blocks/chart/composed-chart/chart-20.md) (`get_block("chart-20")`)

## Third-party libraries

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

## Install

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

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