# Shadcn Line Chart blocks

> Line chart cards with single and multi-series lines, dual axes, reference lines and metric switchers.

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

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

## 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 6 of 6 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 6 of 6 blocks
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 2 of 6 blocks (the docs follow the latest Motion, with no React API break since v12)

## Blocks

- [Balance Tracker](https://web.dev.reui.io/blocks/chart/line-chart/chart-4.md): Portfolio balance line chart with range tabs, high and low markers and a benchmark overlay. Best for one account balance over a picked range with its high and low marked, against a rebased benchmark and the range average.
- [Metric Switcher](https://web.dev.reui.io/blocks/chart/line-chart/chart-6.md): Metric switcher trend chart with KPI tiles, a previous-period ghost line and event annotations. Best for a few headline KPIs that each open the same daily trend, compared with the period before, with dated events marked on the plot.
- [Revenue Trend](https://web.dev.reui.io/blocks/chart/line-chart/chart-22.md): Revenue trend line chart with subscription and one-time streams against the previous period. 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.
- [Social Engagement](https://web.dev.reui.io/blocks/chart/line-chart/chart-23.md): Social engagement line chart comparing channels by metric with a per-channel breakdown table. Best for social channels compared as lines on one metric at a time, with previous-period ghosts and a per-channel totals table.
- [Sales vs Traffic](https://web.dev.reui.io/blocks/chart/line-chart/chart-24.md): Dual-axis sales vs traffic line chart with period compare, line color pickers and store KPIs. 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.
- [Floor Monitor](https://web.dev.reui.io/blocks/chart/line-chart/chart-26.md): NFT floor price line chart with a top bid spread band and a floor alert. Best for one collection's floor price against its top bid over a picked range, with a floor alert level the analyst sets.

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.