# Line vs area

> Two ways to show a value over time.

**Short answer.** Use a line when the direction matters: a rate, a latency, a price you watch move. Use an area when the amount matters too: a balance, a volume, a total you want to feel.

Updated Nov 2, 2026 · Fintech sample data

## 010 · Line

The direction: from $184.7K to $212.4K, with a low of $184.7K.

Cash balance, line. Cash balance from Sep 10 to Oct 9, 2026: from $184.7K to $212.4K, low $184.7K, high $224.5K.

| Day | Balance |
| --- | --- |
| Sep 10 | $184.7K |
| Sep 11 | $189.1K |
| Sep 12 | $194.2K |
| Sep 13 | $201.4K |
| Sep 14 | $205.8K |
| Sep 15 | $212.7K |
| Sep 16 | $207.1K |
| Sep 17 | $207.6K |
| Sep 18 | $214.8K |
| Sep 19 | $217.9K |
| Sep 20 | $224.5K |
| Sep 21 | $220.1K |
| Sep 22 | $220.7K |
| Sep 23 | $218.1K |
| Sep 24 | $219.8K |
| Sep 25 | $221.8K |
| Sep 26 | $216.0K |
| Sep 27 | $213.0K |
| Sep 28 | $210.9K |
| Sep 29 | $217.7K |
| Sep 30 | $222.5K |
| Oct 1 | $218.7K |
| Oct 2 | $223.9K |
| Oct 3 | $219.8K |
| Oct 4 | $222.4K |
| Oct 5 | $218.2K |
| Oct 6 | $212.2K |
| Oct 7 | $218.4K |
| Oct 8 | $215.4K |
| Oct 9 | $212.4K |

## 011 · Area

The same 30 days with the amount under the line.

Cash balance, area. Cash balance from Sep 10 to Oct 9, 2026: from $184.7K to $212.4K, low $184.7K, high $224.5K. The area starts at zero.

**Same 30 days.** The line makes every turn easy to follow. The area makes the size of the balance felt: it never drops below $184.7K, so the dips look as small as they are.

## If you ask

| Question | Use a |
| --- | --- |
| Is it going up or down? | Line |
| How big is it? | Area |
| Is it a rate or a latency? | Line |
| Is it a balance or a volume? | Area |

## Line and Area compared

|  | Line | Area |
| --- | --- | --- |
| Answers | Which way the value moves | How much there is over time |
| Shows | One line | A line with the space under it filled |
| Best when | Rates, latency, prices | Balances, volumes, totals |
| Avoid when | The amount itself matters | Several series would hide each other |
| Data shape | One value per point in time | One value per point in time |

## Common mistakes

### Line

- **Several lines in one colour.** Give each series its own colour, or use a multi-line chart.
- **Joining across gaps.** A missing day should show as a gap, not a straight run.

### Area

- **Stacking solid fills.** Areas behind are hidden. Use see-through fills.
- **An area for a rate.** A fill reads as an amount; a rate reads better as a line.

## Other ways to show it

- [012 · Multi-line](https://usechartory.com/charts/multi-line): Change over time · AI data
- [013 · Overlapping areas](https://usechartory.com/charts/overlapping-areas): Change over time · Crypto data
- [015 · Forecast band](https://usechartory.com/charts/forecast-band): Change over time · Fintech data

## Line, area and the other 130 types.

In Figma and React, in four sizes, light and dark. Pay once, every update. [See plans](https://usechartory.com/pricing). [Line type page](https://usechartory.com/charts/line) · [Area type page](https://usechartory.com/charts/area)

## Questions

### Can an area start above zero?

For prices it can fit the range, as long as the axis says where it starts. For amounts, start at zero.

### Which reads better at small sizes?

Both stay readable from XS to L; the line uses less ink on a busy card.

### Do both come in every size?

Yes. Line and Area come in XS, S, M and L, each laid out again for its size, in light and dark.

### Do they install the same way?

Yes, one command each: npx shadcn add @chartory/line and npx shadcn add @chartory/area.

## More comparisons

- [Bars vs horizontal bars](https://usechartory.com/compare/bars-vs-horizontal-bars)
- [Stacked vs grouped bars](https://usechartory.com/compare/stacked-vs-grouped-bars)
- [Treemap vs sunburst](https://usechartory.com/compare/treemap-vs-sunburst)
- [Donut vs semi donut](https://usechartory.com/compare/donut-vs-semi-donut)

Still not sure? Start from what the chart has to show. [Open the Chart Chooser](https://usechartory.com/chooser)