# Revenue Trend block

> Revenue trend line chart with subscription and one-time streams against the previous period

Net revenue over 7 days to 12 months beside subscription and one-time lines and a dashed baseline from the previous period or last year, with KPI deltas, a running total view and CSV export. ReUI Frame, Badge. SaaS finance dashboard.

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

## Best for

Revenue read period over period and split into subscription and one-time streams, with like for like deltas and a running total pace view

## Agent notes

- Replace `buildDays` in data.ts with your daily ledger; `pointsOf` buckets it by day or calendar month, so the strip, readout and CSV all follow
- `AS_OF` is the demo clock: today's row holds only `TODAY_SHARE` of a day and its baseline is cut to the same hour, so deltas stay like for like
- `refresh` only waits `REFRESH_MS` and bumps `revision`, which redraws the lines and the `updated` stamp; wire it to refetch your revenue

## When not to use

- Several platforms compared as separate lines on one shared axis: use [Social Engagement](https://web.dev.reui.io/blocks/chart/line-chart/chart-23.md) (`get_block("chart-23")`)
- Sales against site traffic, each on its own axis: use [Sales vs Traffic](https://web.dev.reui.io/blocks/chart/line-chart/chart-24.md) (`get_block("chart-24")`)

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

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