# Cashflow Trend block

> Cashflow area and line chart card with period range selector and total plus percentage trend

Cashflow chart card pairing a gradient Area with a dotted Line, a 6m/12m/2y range Select, a total with a green percentage trend, and a custom tooltip. Built with ReUI Frame, shadcn Select and ChartContainer. For finance and analytics dashboards.

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

## Best for

One cashflow line over a soft area whose total sums the months a 6 month, 12 month or 2 year Select keeps, labeled by date range

## Agent notes

- `getFilteredData` returns all 12 `cashflowData` rows for both 12m and 2y, so only the `dateRange` label changes
- Replace `cashflowData` and the `dateRange` strings in `PERIODS`; the 12.5% trend beside `totalCash` is a fixed literal
- `CustomTooltip` hardcodes the violet swatch and Cashflow label rather than reading `chartConfig`

## When not to use

- Shopping funnel stages stacked as areas, with tiles reading each stage's latest point: use [Conversion Funnel](https://reui.io/blocks/chart/area-chart/chart-16.md) (`get_block("chart-16")`)
- A call operations page that rebuckets one line hourly, daily or weekly per metric: use [Voice Agent Calls](https://reui.io/blocks/application/dashboard/dashboard-4.md) (`get_block("dashboard-4")`)

## Install

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

## About Composed Chart blocks

### When to use

- A primary series as a filled area with a goal, baseline or forecast traced as lines on the same axis
- Release health against a baseline, with limit lines and a marker where a rollback happened

### When not to use

- One volume series alone, with no goal or baseline to compare against: use the [Area Chart blocks](https://reui.io/blocks/chart/area-chart.md)
- Two or more series drawn only as strokes across shared time buckets: use the [Line Chart blocks](https://reui.io/blocks/chart/line-chart.md)

### Agent notes

- Areas and lines share one `ComposedChart`, so a new series goes in as an `Area` or a `Line` child with its own `dataKey`

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.