# Area chart in Figma

> A line chart that also shows volume

An area chart fills below the line, which reads as accumulated quantity rather than just rate. Stacked, it shows how a total is composed over time — but stacking makes individual series hard to read, because each one sits on a moving baseline.

## Available in 3 of 5 chart libraries

| Library | Ready-made examples |
| --- | --- |
| Google Charts | 6 |
| Highcharts | 7 |
| ApexCharts | 6 |

19 examples in total.

These are the real charting libraries running inside the plugin, not redrawn lookalikes. The area chart on your canvas is the library's own output, and the Export tab hands developers that same library's configuration plus React, Vue, Angular or Svelte code — so what you design is what gets built.

## Reach for it when

- A single series where the magnitude matters as much as the direction.
- Stacked, to show how the composition of a total shifts over time.

## Use something else when

- Comparing several series precisely — only the bottom one has a flat baseline.
- The values can go negative; the fill becomes ambiguous.

## The data it needs

Same as a line chart: time labels, then one column per series.

| Month | Revenue | Cost |
| --- | --- | --- |
| Jan | 42 | 31 |
| Feb | 55 | 34 |
| Mar | 61 | 38 |

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

All chart types: https://systergon.com/figma-charts/chart-types