# Sales vs Traffic block

> Dual-axis e-commerce sales vs views line chart with period selector and KPI trend badges

Plots sales and views on two independent Y-axes as solid and dashed recharts lines, with a 30 vs 90 day Select, KPI totals plus trend Badges, and a dark custom tooltip in a ReUI Frame. For e-commerce analytics and revenue vs traffic dashboards.

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

## Best for

Sales and views on 2 independent hidden axes, solid against dashed, with summed period totals, sales in pounds, and a 30 or 90 day Select

## Agent notes

- `salesViewsData` holds 6 weeks under 30d and 6 months under 90d; rebuild both to match the `PERIODS` labels
- The +8% and +5% `Badge` deltas are literals; only `totalSales` and `totalViews` follow the period
- `ChartContainer` receives an inline config, so editing `chartConfig` in data.ts changes nothing

## When not to use

- Several stages that add up, stacked into one funnel with a tile per stage: use [Conversion Funnel](https://reui.io/blocks/chart/area-chart/chart-16.md) (`get_block("chart-16")`)
- Monthly sales measured against a goal line with a dated marker: use [Sales vs Goal](https://reui.io/blocks/chart/composed-chart/chart-20.md) (`get_block("chart-20")`)

## 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://reui.io/blocks/chart/area-chart.md)
- Compact tiles where each figure carries a small trend of its own: use the [Sparkline blocks](https://reui.io/blocks/chart/sparkline.md)

### Agent notes

- Each stroke takes its label and color from a `chartConfig` key passed to `ChartContainer`, so add a key for every new series

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.