Install Figma Charts — it’s free to try → See the area chart gallery →
An area chart is a line chart with the space beneath it filled in. That sounds like a styling decision and it is not: the fill changes what the chart claims. A line says this is the rate. A filled area says this is the quantity — and quantity implies accumulation, which implies the values are things you could add up.
Get that right and an area chart is the clearest way to show a total changing shape over time. Get it wrong and you have added visual weight to a chart that did not want any, or worse, stacked several series in a way that makes four of them unreadable.
Everything below happens inside Figma Charts, a Figma plugin. It runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window, so what you see is the library’s own rendering.
Install Figma Charts from the Figma Community →
Press ⌘/ (Ctrl / on Windows), type Figma Charts, hit Enter, then pick the Area chip — or the Line chip under Nivo and ECharts, which is where those two file their area charts.
An area chart answers “how much, over time?” where a line answers “which way, over time?”
The filled region carries the meaning. Its height at any point is the value; its area reads as an accumulated total across the period. That is why area charts feel right for volumes — storage used, requests served, revenue, rainfall — and feel wrong for rates and ratios. Nobody accumulates a temperature. Filling under a line of average response times implies you could sum the region to get something meaningful, and you cannot.
The test is simple: if adding the values together produces a number that means something, an area chart is honest. If it does not, use a line.
Two examples make the boundary concrete. Daily downloads pass: sum a week of them and you get the weekly downloads, a real figure, and the shaded region genuinely represents it. Daily conversion rate fails: sum a week of percentages and you get a meaningless number in the hundreds, so the region under the curve represents nothing at all. Both are perfectly good line charts. Only the first is an area chart.
Use an area chart for a single series where magnitude matters as much as direction, or stacked, to show how the composition of a total shifts over time.
1. Not for comparing several series precisely. This is the big one and it has the same shape as the stacked bar problem: in a stacked area chart, only the bottom series sits on a flat baseline. Every series above it rides on the moving surface of the ones below, so its own shape is distorted by their variation. A reader trying to judge whether the third band grew is doing a task human vision cannot perform. Stack when the total is the subject and the bands are composition; use plain lines when the individual series are the subject.
2. Not when values can go negative. The fill runs from the line to the baseline, so a series crossing zero produces a region that flips to the other side and reads ambiguously — two areas that look similar can mean opposite things. Use a line, or a bar chart with a clear zero axis.
3. Not with more than about four bands. Overlapping translucent areas turn to mud quickly, and stacked ones become thin ribbons whose changes are invisible. Past four, use small multiples — the same chart once per series, sharing axes.
Identical to a line chart — the cartesian shape the ordinary data table is built for:
Because the shape is identical, switching between line and area is a configuration change rather than a rebuild. Area charts also accept a linked data source in every library, so they can be fed from a Google Sheet, an API, Airtable or Supabase.
The same parsing caution applies, and it bites harder here: an unparseable cell in a numeric column becomes 0, and on an area chart a spurious zero does not just dent the line — it collapses the filled region to the axis, which reads as the quantity genuinely going to nothing. Clear placeholders like N/A before you connect.
There are three ways to draw more than one series, and they answer different questions.
Stacked puts the bands on top of each other, so the top edge is the total. Use it when the total is the story and the composition is supporting detail. Order the bands deliberately: put the largest and most stable series at the bottom, because the bottom band is the only one with an undistorted shape, and a volatile series down there makes everything above it wobble.
Overlapping draws each series from the baseline with translucent fills. It keeps every series on a true baseline, so shapes stay honest — but colours mix where regions overlap and it degrades fast beyond two or three series. Two series with a clear story about the gap between them is where this works.
100% stacked normalises every period to full height, so the chart shows proportion over time and nothing else. It is the right chart for “how did the mix shift?” and the wrong chart for anything about magnitude — a period with a tenth of the volume looks exactly as substantial as the busiest one. Pair it with something that shows the total, or state the totals in the labels.
All five libraries draw area charts, but only three file them under their own Area category — 19 examples between them:
enableArea option, with gradient support.So a missing Area chip means “this library files it elsewhere”, not “this library cannot”. If your engineers use ECharts or Nivo, you are not giving up area charts by designing there.
Two chart types are stacked area charts with one rule changed, and both solve a problem the ordinary version cannot.
The streamgraph replaces the flat baseline with a centred, flowing one, so the bands ripple symmetrically around the middle. Giving up the baseline means giving up reading absolute values — nothing sits on zero any more — but every band gets a less distorted shape than it would have had stacked on top of a volatile neighbour, and the whole reads as a single organic form. Use it for many categories over a long period where the story is the changing texture of the mix rather than any specific number. Highcharts and Nivo both ship one under Stream.
Theme river is the same idea in ECharts, filed under its own Theme River category, and it is one of the few chart types ECharts has that nothing else in the plugin does.
Both are presentation charts rather than analysis charts. They are excellent at “this is what the last five years looked like” and useless at “what was the value in March”. If a reader will ask the second question, use a stacked area chart with a real baseline.
The other place area charts earn their keep is at small sizes, where they beat lines outright.
A tiny line in a dashboard tile is a thin, low-contrast squiggle. Fill it and the same shape reads instantly at 120px wide, because the eye picks up a silhouette faster than a stroke. That is why sparklines in KPI tiles are so often filled — not decoration, legibility at size.
The plugin has a direct route to this: set the complexity control in the editor header to Essential and the chart drops its title, legend, tooltip, axes, gridlines and data labels, leaving the marks alone. That is precisely the sparkline treatment, and it is one control rather than a dozen. Pair it with the headline number in the tile and let the shape supply the trend.
Two caveats at that size. Without an axis there is no scale, so the shape shows direction and volatility only — put the actual figure next to it. And because the fill is doing the work, keep it more opaque than you would at full size; a 15% fill that looks elegant at 800px disappears at 120px.
The fill should be quieter than the line. A common and effective treatment is a solid stroke at full strength with the fill at 10–20% opacity, or a gradient fading toward the baseline. The line carries the precision; the fill carries the sense of quantity. A fully saturated fill overwhelms the chart and makes gridlines and labels beneath it unreadable.
Gradients are the one place chart decoration is genuinely defensible. Fading the fill toward the axis reduces visual weight exactly where the encoding matters least, and it makes overlapping areas legible. It changes no values, which is what separates it from a 3D pie.
Mind the stacking order. Largest and steadiest at the bottom. This is a substantive decision, not a visual one — it determines whose shape is readable.
Keep the baseline visible. The whole encoding is height above a baseline, so if the fill obscures the axis line, restore it. This is the most commonly lost detail when a designer turns a line chart into an area chart by eye.
Label bands directly where you can. With three or four stacked bands, a label inside each removes the legend lookup entirely. For thin bands, a leader line to the outside beats shrinking the type.
For palettes and type tied to your design system, see Your chart, your design system.
Area charts must start at zero. Unlike a line chart, which may be truncated because slope survives it, an area chart encodes quantity as filled area from the baseline. Move the baseline and the areas are simply wrong — a series that varies by 2% around 100 becomes a dramatic mountain range with a truncated axis. If you were reaching for a truncated axis, you wanted a line chart.
Only the bottom band of a stack is readable. Worth repeating because it is the most common misuse: every band above the first is drawn on a moving baseline, and its apparent thickness at any point is affected by everything below it. Readers will still try to compare them.
The fill exaggerates. Filled regions carry more visual weight than lines, so the same data looks more significant as an area chart. That is legitimate when magnitude is the point and a rhetorical thumb on the scale when it is not.
Overlapping fills invent a third colour. Where two translucent areas cross, the blend reads as a distinct category that does not exist. With two series it is tolerable and often informative; with four it is noise.
Smoothing an area chart compounds the problem. A spline can bulge above the points it connects, and in an area chart that bulge is filled — so the invented values are given visual mass. Use straight segments unless the data is genuinely dense and continuous.
One area-chart variant deserves more use than it gets: the range area, which fills between an upper and a lower bound rather than between a line and the baseline.
It is the natural way to draw anything that is a band rather than a point — a forecast with a confidence interval, a daily min and max, a p50 with p95 above it, a budget envelope. Instead of a single line implying precision you do not have, the reader sees the width of what you actually know, and the band narrowing or widening over time is itself information.
A common and effective composition layers the two: a range area at low opacity for the interval, with a solid line through it for the central estimate. The reader gets the headline and its uncertainty in one object, and nobody has to be told that a forecast is uncertain — the chart shows it.
Highcharts is where this lives in the plugin, shipping area-range and area-range-with-line examples. It is one of the more persuasive reasons to design a forecast chart there, alongside its dotted-line convention for distinguishing projected periods from measured ones.
Translucent fills wreck contrast. A colour that passes contrast at full opacity may not at 15%, and stacked translucent bands over gridlines produce combinations nobody checked. Test the actual rendered colours, not the source swatches.
Distinguish bands by more than hue. Vary lightness across the stack as well as hue, so the chart survives greyscale printing and colour vision deficiency. Direct labels help more than a legend.
Ship a text equivalent. Copy Data Table in the Export tab gives a screen-reader user the underlying numbers, which for a stacked area chart is far more useful than a description — the individual band values are precisely what the visual encoding hides.
Say what is being accumulated, and in what units. “Requests (millions, per day)” tells the reader whether the area under the curve means anything.
From the Export tab, Code writes a component for React, Vue 3, Angular, Svelte or vanilla JavaScript against the same library at the same major version; Config gives you the library’s options object; Tokens exports the colours and type.
Area charts have more style state than most — fill opacity, gradient stops, stacking mode, stack order — and every one of those is invisible in a screenshot. This is a chart type where handing over the config rather than a picture saves a genuine round of review. From Figma to code covers all eight formats.
If you plan to animate it: like lines, area paths cannot morph between states, so the plugin recommends Dissolve rather than Smart Animate. See the animation post.
The fill, and what it claims. A line encodes rate of change through slope; an area encodes quantity through filled region, which implies the values accumulate. If summing your values produces a meaningful number, an area chart is honest — otherwise use a line.
Yes. A line chart may be truncated because slope survives it, but an area chart encodes quantity as area from the baseline, so moving the baseline makes the regions wrong. If you want a truncated axis, you want a line chart.
Because only the bottom band has a flat baseline. Every band above it sits on the moving surface of the ones below, so its shape is distorted by their variation. Stack when the total is the story; use separate lines or small multiples when individual series matter.
About four. Beyond that the upper bands become thin ribbons whose changes are invisible, and overlapping translucent fills turn to mud. Use small multiples instead.
When the question is how the mix shifted over time and magnitude does not matter. Every period is drawn at full height, so a quiet period looks as substantial as a busy one — pair it with something showing the totals.
Because those two file area charts under Line. Both draw them — ECharts ships basic, stacked, gradient and piecewise area examples, and Nivo has an enableArea option with gradient support. A missing chip means it is filed elsewhere, not unavailable.
Poorly. The fill runs from the line to the baseline, so a series crossing zero produces regions on both sides that read ambiguously. Use a line chart or a bar chart with a clear zero axis.
Gradients are one of the few chart decorations that are genuinely defensible — fading toward the baseline reduces visual weight where the encoding matters least and keeps overlapping areas legible, without changing any value.
Open an area chart, put your series in, and ask whether adding the numbers together would mean anything. If yes, you are in the right chart — and the only decision left is whether to stack. If no, switch it to a line and you have lost nothing.
Install Figma Charts — it’s free to try → Browse all 45 chart types →