Install Figma Charts — it’s free to try → See the line chart gallery →
A bar chart asks you to compare lengths. A line chart asks you to read a shape — and that changes what it is good at, what it is bad at, and which of its conventions you are allowed to break.
It is also the chart most likely to be built wrong in a way nobody notices, because a line is confident. It draws a continuous path through your data whether or not the data is continuous, fills in values you never measured, and turns a single missing cell into a dramatic plunge to zero. This is how to build one that tells the truth.
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 the line on your canvas is the library’s own output, including how it decides to handle the awkward parts.
Install Figma Charts from the Figma Community →
Press ⌘/ (Ctrl / on Windows), type Figma Charts, hit Enter, then pick the Line chip under the library tabs.
A line chart answers “what happened, and where is it going?”
It works by connecting successive observations so that the eye reads slope as rate of change. That is the whole mechanism, and it carries a strong implication: the segment between two points is a claim that the values in between lie along that path. When your x axis is genuinely continuous — dates, durations, versions, temperatures — that claim is reasonable. When it is not, the line is asserting something false.
The difference from a bar chart is worth stating precisely, because it licenses one thing and forbids another:
That is the single most useful thing to know about the two charts. The zero-baseline rule is not a general principle of honesty; it is a consequence of the encoding, and lines use a different one.
Use a line chart for any time series, and whenever you want three or four series compared by shape rather than by value. Lines handle multiple series far more gracefully than bars, because shapes can overlap and still be read separately.
Three cases where it is wrong:
1. Your x axis is unordered categories. Countries, products, teams, departments. Connecting them draws a slope between France and Germany, which means nothing, and implies a progression that does not exist. The reader’s eye will find a trend anyway — that is what the encoding is for. Use a bar chart.
2. You have two or three points. A line through three points looks like knowledge of a trajectory. It is not; it is three measurements and two assumptions. With very few observations, show the points and let the reader see how little there is — a scatter or a plain bar is more honest.
3. Your observations are unevenly spaced but plotted evenly. This is the subtle one. If you have readings for January, February and then October, and the chart places them at equal intervals, the slope between February and October is compressed into the same horizontal distance as a single month. The line now understates an eight-month drift. Either plot against a real date axis so the spacing is true, or say plainly that the axis is ordinal.
A line chart takes the same cartesian shape as a bar chart, which is the plugin’s default table:
Like bar charts, and unlike the hierarchical and flow types, line charts accept a linked data source in all five libraries. So a line chart is one of the two types you can most reliably wire to a live Google Sheet, an API, Airtable or Supabase.
And this is where line charts are more dangerous than bar charts. When the plugin reads a numeric column, a value it cannot parse becomes 0 rather than a gap. On a bar chart a spurious zero is a missing bar — visibly odd. On a line chart it is a vertical plunge to the axis and back, which looks exactly like a catastrophic real event. One N/A, one —, one “pending” in a revenue column, and your chart reports an outage that never happened.
Before you connect a line chart to anything, clear placeholder text out of the numeric columns. An empty cell is genuinely empty; a placeholder is a lie the line will draw confidently. Details of that parsing behaviour are in the live-data post.
If you want to change one element without hunting the option tree, turn on the Inspector and click the thing — the axis, the legend, a series. It filters the configuration panel to that element, and works on Highcharts and ApexCharts.
All five draw line charts, and the gallery holds 116 line examples between them — the largest bench of any chart type in the plugin:
As always, the rule that beats the rest: design in the library your engineers already use, because the exported code then matches production. Choosing the right chart library covers it properly.
Colour and typography matter less here than three choices that are specific to lines.
1. Curve: straight or smoothed? A smoothed (spline) line looks more elegant and is frequently dishonest. Interpolation invents values between your observations — a monotone curve can bulge above every point it connects, showing a peak you never measured. Use straight segments by default. Smooth only when the underlying process really is continuous and densely sampled, where the curve approximates reality rather than inventing it.
2. Markers: points or no points? Markers say “these are the measurements; everything between is joining”. That is usually the honest signal, and it is essential when observations are sparse or unevenly spaced. Drop markers when you have hundreds of points and they would merge into a caterpillar — at that density the line is clearly a summary and nobody mistakes it for individual readings.
3. Gaps: break, bridge, or zero? Missing data has three possible renderings and only two are ever right. Breaking the line shows honestly that you do not know. Bridging the gap with a straight segment is acceptable when the reader can tell interpolation from measurement — markers make that visible. Zero is always wrong, because it converts “we have no reading” into “the value was nothing”. Since the plugin turns unparseable cells into zero, this is a decision you make in your data before it is one you make in the chart.
There is a fourth variant worth knowing because it is the right answer more often than it gets chosen: the stepped line, where the value holds flat and then jumps, rather than sloping between observations.
Use it whenever the underlying quantity genuinely is constant between changes: a price that held at £29 until it moved to £39, headcount, a rate limit, a feature flag’s rollout percentage, an interest rate. A sloping line between those points says the value drifted gradually through every intermediate figure, which is simply untrue — there was never a day at £34.
Both Highcharts and ApexCharts ship step-line examples, ECharts has one too, and the same idea appears as stepped area. It costs nothing to switch and it removes a small, permanent lie from any chart of values that change discretely.
Line weight carries meaning. If one series is the subject and the others are context, make the subject heavier and the rest thin and neutral. A chart with four lines at equal weight is asking the reader to do the prioritising you should have done.
Label the lines directly if you can. A legend forces a lookup: read the colour, find it in the key, come back. A label at the end of each line removes that entirely. With three or four series there is almost always room.
Four series is the practical ceiling. Beyond that lines cross often enough to become a tangle. The standard fix is small multiples — the same chart repeated once per series, sharing axes — which reads better than eight colours ever will.
Gridlines quiet, horizontal only. They exist so the reader can estimate values; they should never compete with the data.
Watch the aspect ratio. A line chart’s message lives in its slopes, and slopes depend entirely on the frame’s proportions. The same series looks like a crisis in a tall narrow chart and like stability in a short wide one. The classic guidance is to aim for the average slope of the important segments to sit near 45° — steeper and changes are exaggerated, shallower and they vanish. At minimum: choose the proportions before you check whether they suit your argument.
To keep colours and type tied to your design system rather than picked by hand, see Your chart, your design system.
The truncated axis is allowed, and still needs care. Lines may start above zero, but the scale still sets how dramatic the change looks. A 2% move rendered across the full height of the frame reads as a collapse. Nothing is being falsified — the slope is real — but the emotional register is a choice you are making. Label the axis clearly and let the numbers moderate the picture.
Smoothing invents data. Worth repeating because it is so often applied purely for looks. If your spline curves above the highest point in a segment, the chart is showing a maximum that does not exist in your data.
A line implies you could have measured in between. For daily active users that is true. For a survey run twice a year it is not — the line between two annual points is decoration, and markers plus a note serve the reader better.
Dual axes are almost always a trick. Two series on two different scales in one frame lets you make the crossings land wherever you like by adjusting either scale, and readers cannot tell. If you must compare differently-scaled series, index them to a common baseline (everything at 100 at the start) or use small multiples.
Cumulative lines only ever go up. A running-total line always rises, which looks like health regardless of what is happening. If the question is “how are we doing lately”, plot the periodic value, not the cumulative one.
Do not distinguish series by colour alone. This bites harder on lines than bars, because lines have no position to fall back on — they overlap. Use dash patterns as well as colour, or label lines directly, so the chart survives being printed in greyscale or read by someone with a colour vision deficiency.
Check colours against each other, not just the background. Two line colours can each pass contrast against white and be indistinguishable from one another where they cross — and a 2px stroke is a much harder case than a filled bar.
Ship a text equivalent. The Export tab’s Copy Data Table gives a screen-reader user the actual numbers, which for a time series is far more useful than any description of the shape. Copy Alt Text and Set Node Desc handle the summary and attach it to the Figma node.
Say what the axis measures and in what units. For time series, also say the interval — “weekly” and “monthly” look identical once the labels are abbreviated.
If you plan to animate the chart as a Figma prototype, line charts have a specific constraint worth knowing before you build around it: Smart Animate cannot morph a line. It matches layers between states and tweens them, and a line is a single path whose point list differs between states — there is no correspondence to interpolate, so it flickers rather than draws.
The plugin knows this and recommends Dissolve for line, area and spline charts. To get a genuine reveal, build it as a sequence of snapshots that each add more data points, or cross-fade the line while a Smart-animated marker travels along it. The animation post explains the mechanism.
From the Export tab, Code writes a working component for React, Vue 3, Angular, Svelte or vanilla JavaScript using the same library at the same major version; Config gives you the library’s own options object for teams that already have a chart component; Tokens exports the colours and type as CSS, SCSS, Tailwind, W3C tokens or JSON.
For line charts specifically, the config is worth handing over rather than describing: curve type, marker visibility, null handling and axis bounds are exactly the settings that get lost in a screenshot and quietly re-decided by whoever builds it. From Figma to code covers all eight formats.
No, and often it should not. A bar encodes value as length from a baseline, so truncating corrupts it. A line encodes change as slope, which survives a non-zero baseline — and forcing zero on a series that moves between 98 and 102 flattens the story into a straight line. Label the axis clearly and choose a range that shows the variation honestly.
Usually not. Smoothing interpolates between your observations and can draw peaks you never measured — a monotone curve can bulge above every point it connects. Use straight segments unless the underlying process really is continuous and densely sampled.
Break the line, or bridge it with markers visible so interpolation is distinguishable from measurement. Never plot it as zero: that turns “no reading” into “the value was nothing”. Watch for this when importing — the plugin converts unparseable cells in a numeric column to 0, so clear placeholders like N/A from your data first.
About four before crossings make it a tangle. Beyond that, use small multiples — the same chart repeated once per series with shared axes — or highlight one series and mute the rest.
Line if the story is the trajectory — the rise, the dip, the recovery. Bars if each month is a thing to be compared in its own right, as in “March was the outlier”. Both are defensible; they emphasise different questions.
Avoid it. With two independent scales you can move the crossing points anywhere by adjusting either axis, and readers have no way to tell. Index both series to 100 at a common starting point, or use small multiples.
Whichever your engineers already use. Otherwise: ECharts for range (65 examples), Nivo for the hard cases — it ships explicit examples for holes in data and logarithmic scales — Highcharts for splines and forecast conventions, Google for trendlines, ApexCharts for line-and-column mixes.
Because Smart Animate matches layers by name and tweens them, and a line is one path whose points differ between states — there is nothing to interpolate. Use Dissolve, or build the reveal as several snapshots that each add points.
Open a line chart, paste in a real series with a gap in it, and watch what the chart does with the gap. That one test tells you more about whether your chart is honest than any style decision on this page.
Install Figma Charts — it’s free to try → Browse all 45 chart types →