# Sales vs Goal block

> Sales vs goal line chart with an attainment and YTD tooltip, quarter close marker and accent picker

Closed sales by month against a dashed goal and last year. Tooltip with attainment, deltas and running YTD; range and display menus, color picker, refresh, expand, CSV and copy export. shadcn Card, ReUI ColorPicker, Badge. Quota dashboard.

- Type: Pro block
- Category: [Composed Chart](https://web.dev.reui.io/blocks/chart/composed-chart.md)
- Page: https://web.dev.reui.io/blocks/chart/composed-chart/chart-20
- MCP: `get_block("chart-20")`
- Built with: Badge, Button, Button Group, Card, Chart, Color Picker, Dialog, Dropdown Menu, Spinner, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Closed sales against a monthly goal and last year, with attainment, both deltas and the running year to date in the tooltip

## Agent notes

- Replace `monthlySales` and `years`; a month whose `sales` is null has not closed, so it plots its goal only and the marker stands at the last quarter close
- `RANGE_MONTHS` sets the three ranges as month index spans; add an entry to `rangeOptions` and `RANGE_MONTHS` for another range
- Refresh waits `REFRESH_MS`, replays the reveal and sets Synced to just now from the fixed `syncedAt`; fetch your sales there

## When not to use

- Sales weighed against views on 2 independent scales: use [Sales vs Traffic](https://web.dev.reui.io/blocks/chart/line-chart/chart-24.md) (`get_block("chart-24")`)
- A metric this year against last year by month, with a fitted trend through the points: use [Inbound Leads](https://web.dev.reui.io/blocks/chart/area-chart/chart-52.md) (`get_block("chart-52")`)

## Third-party libraries

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

## Install

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

## About Composed Chart blocks

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

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.