# Shadcn Composed Chart blocks

> Composed charts that mix bars, lines and areas on one axis: liquidity flows, sales against a goal, cashflow, margin and a canary rollback.

- Type: Pro blocks (Charts)
- Page: https://web.dev.reui.io/blocks/chart/composed-chart
- Blocks: 5
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- Bars and a line on one time axis, such as revenue and opex columns under an operating margin line
- A measure against its goal or limit, such as closed sales against a dashed goal or latency past a limit
- Cash or liquidity flowing in and out by period, over the balance those flows add up to

## When not to use

- One volume series alone, with no goal or baseline to compare against: use the [Area Chart blocks](https://web.dev.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://web.dev.reui.io/blocks/chart/line-chart.md)

## Agent notes

- Every block plots in a recharts `ComposedChart` in the shadcn `ChartContainer`; a new series is one more `Bar`, `Area` or `Line` child with a `dataKey`

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/), used by 5 of 5 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 5 of 5 blocks

## Blocks

- [Liquidity Flows](https://web.dev.reui.io/blocks/chart/composed-chart/chart-19.md): Lending pool liquidity chart with asset-stacked supply, withdrawals below zero and a TVL lane. Best for daily, weekly or monthly supply stacked by asset over withdrawals below zero, with the TVL those flows add up to drawn in a lane above.
- [Sales vs Goal](https://web.dev.reui.io/blocks/chart/composed-chart/chart-20.md): Sales vs goal line chart with an attainment and YTD tooltip, quarter close marker and accent picker. Best for closed sales against a monthly goal and last year, with attainment, both deltas and the running year to date in the tooltip.
- [Cashflow Trend](https://web.dev.reui.io/blocks/chart/composed-chart/chart-21.md): Cashflow composed chart with a balance panel, in and out columns, net flow dots and a waterfall. Best for operating cash in, out and net by month or quarter, as flows or a waterfall bridge, with the balance over a reserve floor.
- [Operating Margin](https://web.dev.reui.io/blocks/chart/composed-chart/chart-36.md): Operating margin chart with revenue and opex bars, a margin lane, a target and hatched forecast. Best for monthly or quarterly revenue against operating expenses, the operating margin they leave, a margin target and a hatched forecast.
- [Canary Rollback](https://web.dev.reui.io/blocks/chart/composed-chart/chart-37.md): Canary latency chart with stacked baseline and regression columns, breach stats and a rollback track. Best for a post-incident read of one rolled-back release: how much latency it added per sample over the old version, and how far past the limit.

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.