# Sales vs Goal block

> Sales vs goals composed line and area chart with vertical reference line marker

Sales overview card plotting actual vs goal lines over a gradient area fill, with a dashed vertical reference marker, dollar-to-millions axis, custom tooltip, and Export/Filter/Share dropdown. ReUI Card, Button, DropdownMenu. For revenue dashboards.

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

## Best for

Actual sales against a dashed goal line with a fixed date marker and an Export, Period, Filter and Share menu, no range control

## Agent notes

- Replace `salesData`; each row copies `sales` into `salesArea`, which draws the fill and is dropped from `CustomTooltip`
- The Export, Period, Filter and Share `DropdownMenuItem` entries have no onClick, so no menu choice runs an action
- The `ReferenceLine` is pinned to Mar 24 in chart.tsx rather than read from `salesData`

## When not to use

- Sales weighed against views on 2 independent scales: use [Sales vs Traffic](https://reui.io/blocks/chart/line-chart/chart-24.md) (`get_block("chart-24")`)
- A range picker that recomputes the headline total as the period changes: use [Cashflow Trend](https://reui.io/blocks/chart/composed-chart/chart-21.md) (`get_block("chart-21")`)

## Install

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

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