Install Figma Charts — it’s free to try → See the bar chart gallery →
The bar chart is the one you should reach for when you are not sure. That is not a lack of ambition — it is the reason it is everywhere. Bars encode value as length from a common baseline, and length from a common baseline is the thing human vision judges most accurately. Better than angle, better than area, far better than colour intensity. If your data is a set of named categories with a number each, the honest answer is almost always a bar chart, and the interesting question is how to build a good one.
This is that: what a bar chart is actually for, the three situations where it is the wrong choice, how to build one in Figma against your real numbers, what each of the five charting libraries gives you, and the handful of ways a bar chart can quietly mislead the person reading it.
Everything below happens inside Figma Charts, a Figma plugin. It does not draw charts of its own: it runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window, so the bar chart on your canvas is the library’s own output, laid out by its own engine.
Install Figma Charts from the Figma Community →
Press ⌘/ (Ctrl / on Windows), type Figma Charts, hit Enter. Bar is the category the gallery opens on, so you are already looking at them.
A bar chart answers “how do these things compare?” — where these things are discrete, named and unordered, or ordered only by their own values.
That is a narrower question than it sounds, and the narrowness is the point. Each bar is a category. Its length is the value. Because every bar starts from the same baseline, comparing two of them is a comparison of two lengths, which people do well and consistently. A reader can tell you that one bar is about a third longer than another. Nobody can do that with two pie slices.
The vocabulary is worth being precise about, because it causes a surprising amount of confusion:
Use a bar chart when you are comparing one measure across a set of named categories, when the categories are few enough to label, and when you want the reader to read differences rather than absorb an impression.
Three cases where it is the wrong tool, in order of how often the mistake is made:
1. Your categories are actually a continuous variable. Response times, ages, prices, file sizes — these are measurements, not categories. Bucketing them and drawing bars produces a histogram, which looks like a bar chart and means something different: the x axis is a number line, the bars touch, and the bin width is a decision you have made and should disclose. Drawing it as an ordinary bar chart with gaps implies the categories are unrelated, which is false.
2. The x axis is time and you care about the shape. Twelve months of revenue as bars is legitimate, but bars emphasise each period as a separate thing to be compared. If the story is the trajectory — the rise, the dip, the recovery — a line chart tells it better, because a line is a shape and shapes are what convey trend. Use bars for time when the individual periods matter (“Q3 was the outlier”) and a line when the movement matters.
3. You have more than about twenty categories and no ordering. Past twenty bars the chart stops being a comparison and becomes a texture. If they can be sorted by value it can still work — a long sorted bar chart is a perfectly good ranking. If they cannot be sorted and cannot be filtered, the chart is a table with extra steps, and an actual table would serve the reader better.
A fourth, less obvious one: if every value is nearly identical, a bar chart makes that clear and boring, and the temptation is to truncate the axis to manufacture difference. That temptation is covered under reading it well, and it is the single most consequential mistake on this page.
A bar chart wants the cartesian shape, which is the plugin’s default and the one the ordinary data table is built for:
One numeric column gives you a plain bar chart. Two or more give you a grouped or stacked one, depending on a single configuration option. That is the whole shape; there is no nesting, no source-and-target, nothing to reshape.
It is also the shape every connector produces, which makes bar charts the easiest type to feed from real data. Paste from a spreadsheet, import a CSV, or connect a Google Sheet or an API — and unlike hierarchical or flow charts, bar charts accept a linked data source in every one of the five libraries. There is no library where a bar chart refuses to bind.
One caution carried over from that connector work: in a column the plugin has judged numeric, a value that will not parse becomes 0 rather than a gap. A stray N/A in your revenue column draws a bar of length zero, which reads as a real measurement of nothing. Clear those cells before you connect.
The fastest honest route is five steps:
Two shortcuts worth knowing. The Essential / Common / Advanced control in the editor header sets how much furniture the chart carries — Essential strips the title, legend, axes and gridlines for a dashboard tile; Common is the ordinary chart; Advanced adds the subtitle and data labels. And if you want to change one element rather than hunt the option tree, turn on the Inspector and click the thing — it filters the configuration panel down to that element. The Inspector works on Highcharts and ApexCharts.
All five draw bar charts, and the gallery holds 97 bar examples between them. They are not interchangeable:
The rule that beats all of the above: if your engineers already use one of the five, design in that one. The chart you approve is then the chart they ship, because the export lists that library’s own npm package at the same major version the plugin rendered with. Choosing the right chart library covers the trade-offs in full.
A bar chart has fewer decisions than most charts, which means each one carries more weight.
Colour is usually the wrong variable. In a single-series bar chart, every bar is the same measure — so colouring each bar differently encodes nothing and invites the reader to look for a meaning that is not there. Use one colour. If you want to draw attention to one bar, colour that one and leave the rest neutral; a single accent against grey is the most effective emphasis in the whole chart vocabulary. Reach for a full palette only when the colours mean something, which is to say when you have multiple series.
Gridlines should be quieter than the bars. They are a measuring aid, not content. A hairline in a light neutral is enough; if the gridlines compete with the data, they are wrong. Horizontal gridlines only, for vertical bars — vertical ones cross the bars and add nothing.
Data labels or an axis, rarely both. If exact values matter, put labels on the bars and consider dropping the value axis entirely. If the shape matters, keep the axis and skip the labels. Doing both is duplication that costs you the whitespace the chart needed.
Gap width is a real decision. Bars should be wider than the gaps between them — a common rule is a gap of about half a bar’s width. Too much space and the bars stop reading as a group; too little and the chart becomes a solid block.
Sort deliberately. Alphabetical order is almost never the most useful. Sort by value unless the categories have a natural order (months, sizes, stages), and if you sort by value, say so.
For type and colour, bind them to your design system rather than picking by hand — the plugin can build a palette from your Figma colour variables and bind chart text to your text styles, which is covered in Your chart, your design system.
This is the section that matters most, because a bar chart is trusted. People read it quickly and believe what they read, so its distortions do real damage.
Truncating the value axis is the big one. A bar chart encodes value as length from a baseline, and that encoding is only true if the baseline is zero. Start the axis at 90 and a difference of 2% becomes a bar three times taller than its neighbour. The reader is not misreading the chart — the chart is lying, in exactly the visual channel it asked to be trusted on. If the differences are genuinely small and genuinely important, that is what a line chart, a dot plot or simply stating the numbers is for. Bar charts start at zero. There is no defensible exception.
Stacked bars only let you compare one series. In a stacked chart every segment after the first floats on the ones below it, so its start position varies from bar to bar. The bottom segment sits on the baseline and can be compared across categories; every segment above it cannot, because comparing two lengths that begin at different places is a task human vision is bad at. If your reader needs to compare the third segment across categories, use a grouped chart or small multiples instead. Stack only when the total is the point and the parts are context.
100% stacked bars hide the totals entirely. Every bar is the same length by construction, so a category with three observations looks exactly as substantial as one with three thousand. They are legitimate for showing composition, but they should never be the only chart — pair them with something that shows magnitude.
Sorting is an argument. Sorting by value puts a claim in the chart: that ranking is what matters. That is often right, and it is never neutral. Be aware you are making it.
Aspect ratio changes the story. The same data in a tall narrow frame looks dramatic and in a short wide one looks flat. There is no correct answer, but there is an honest habit: pick the proportions before you see whether they flatter your argument.
A chart is one of the least accessible things you can put on a page, and bar charts are the easiest kind to fix.
Do not rely on colour alone to distinguish series. Around one in twelve men has some form of colour vision deficiency, and the classic red-versus-green pairing is the one that fails. In a grouped chart, order and position already do most of the work; add a direct label to the series rather than making the reader look between a legend and the bars.
Check contrast against the background, and against each other. Two colours can each pass contrast against white and still be indistinguishable from one another — which is the failure that matters in a legend. Test the small marks, not the large ones: a 4px legend swatch is a harder case than a full-height bar.
Give it a text equivalent. The Export tab has three buttons most people never notice: Copy Alt Text generates a description, Copy Data Table produces an HTML table of the underlying numbers, and Set Node Desc writes the description onto the Figma node so it travels with the design. The data table is the genuinely correct answer for chart accessibility — a screen reader user gets the data rather than a paraphrase of the picture.
Label the axis and its units. “Revenue” is not a unit. “Revenue (£000s)” is. This helps everyone, and it is the cheapest fix on this page.
Because the chart was rendered by a real charting library, the handoff carries the chart rather than a picture of it. From the Export tab:
The whole of that, including the accessibility exports and the embed generator, is in From Figma to code.
Orientation, and nothing else. Columns are vertical, bars are horizontal. Most tools and most people use “bar chart” for both. Choose horizontal when your category labels are long or you have many categories, and vertical when you have a handful of short labels.
Yes. A bar encodes value as length from the baseline, so a non-zero baseline makes the lengths lie about the ratios between values. If your differences are too small to see against a zero baseline, that is information about your data, and a line chart or a dot plot is the honest way to show it.
Stack when the total is the point and the segments are context. Group when the reader needs to compare segments with each other. In a stacked chart only the bottom segment shares a baseline, so only that one can be compared reliably across categories.
About twenty is where a comparison becomes a texture. Beyond that, sort by value so it works as a ranking, filter to the categories that matter, or group the tail into “Other” — and if none of those are honest, use a table.
Whichever one your engineers already use, because the export then matches production exactly. If nobody has an answer: ECharts for range (46 bar examples), Highcharts for lollipop, dumbbell, variwide and error bars, Nivo for the D3 look if you ship React, ApexCharts for a clean product dashboard, and Google Charts for plain and familiar.
Yes, and bar charts are the easiest type to connect — they take the ordinary cartesian shape and accept a linked source in all five libraries, which is not true of hierarchical or flow charts. Refresh is manual and happens while the plugin is open.
Sort the rows in the data table and the bars follow, since bars are drawn in data order. That also makes the ordering explicit in the data rather than hidden in a setting.
Insert as SVG and every bar, gridline and label is a real layer, with the text as real text. Insert as PNG and you get a flat image at twice the pixel density. Either way the chart reopens in the editor with its settings intact, and Update SVG replaces it in place.
Open the plugin, put your real numbers into the first bar chart you see, and look at what happens to the labels. That one step catches more design problems than any amount of planning — and once the chart survives its own data, the rest of this page is just refinement.
Install Figma Charts — it’s free to try → Browse all 45 chart types →