# How to Make a Histogram in Figma (and Choose the Bin Width)
_August 26, 2026 · 11 min read · by Systergon_
> A histogram looks like a bar chart and is a different thing: the axis is a number line, the bars touch, and the height is a count. It also has a parameter no other chart has — the bin width — and changing it turns the same data from smooth to spiky, one peak into three. What separates it from a bar chart, how to choose bins honestly, the four distribution shapes worth recognising on sight, and why the average is usually the wrong summary.
Tags: Figma, Charts, Histogram, Statistics, Plugin
URL: https://systergon.com/blog/figma-charts-histogram
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the histogram gallery →](https://systergon.com/figma-charts/chart-types/histogram)

A histogram looks like a bar chart and is a different thing. A bar chart compares categories that you chose; a histogram shows the **shape of a distribution** that you did not choose — where the values pile up, how far they spread, whether there are two humps instead of one. The bars touch because the axis is a number line rather than a list, and that single detail is what separates the two charts.

![A histogram drawn by Google Charts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-histogram/images/histogram-basic.svg)

_Real plugin output: a Google Charts histogram captured from the editor. Every chart on this page is the library’s own drawing._

It also has a parameter no other chart has: the **bin width**. Change it and the same data produces a different picture — smooth or spiky, one peak or three — without a single value changing. This page is mostly about that, plus what to do when the distribution is the finding.

## First — get the plugin

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 bins on your canvas were computed by the library itself.

[Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts)

Press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter, and pick **Histogram** from the category filter. There are **7 histogram examples** — Google Charts 5 and Highcharts 2 — which makes this one of the narrower categories in the plugin, and the reason is worth knowing: a histogram is mechanically a bar chart with the gaps closed and the bins computed, so several libraries treat it as a configuration of an existing type rather than a type of its own.

## Why it is not a bar chart

Four differences, and every one of them is load-bearing:

- **The x axis is continuous.** It is a measurement — seconds, pounds, ages — divided into intervals, not a set of names. Reordering the bars would be meaningless, where reordering a bar chart is often an improvement.
- **The bars touch.** Gaps imply that the categories are separate things. In a histogram the intervals are adjacent parts of one scale, and a gap says there is space between them that does not exist.
- **The height is a count, not a value.** Each bar says how many observations fell in that interval, so the y axis is frequency and it must start at zero.
- **The bin boundaries are your decision.** There is no equivalent in a bar chart: the categories come from the data. Here you are choosing how coarsely to look.

If you find yourself drawing a “histogram” of revenue by region, you have a [bar chart](https://systergon.com/blog/figma-charts-bar-chart). If you are drawing revenue-per-order across ten thousand orders, you have a histogram, and the question it answers is different: not which is biggest, but what typical looks like and how much variation there is around it.

## Five histograms, and what changes between them

![A response time histogram drawn by Google Charts](https://systergon.com/blog/figma-charts-histogram/images/histogram-response-time.svg)

_**The classic engineering case** — response times, which are almost always right-skewed: a tall pile of fast responses and a long tail of slow ones. The tail is the part that matters and the part an average hides completely._

![A percentile histogram drawn by Google Charts](https://systergon.com/blog/figma-charts-histogram/images/histogram-percentile.svg)

_**With percentiles marked** — the honest companion to the skewed distribution above. If a reader is going to act on this chart, the p95 line is more useful than the mean, and marking it removes the temptation to quote the average._

![A multi-series histogram drawn by Google Charts](https://systergon.com/blog/figma-charts-histogram/images/histogram-multi.svg)

_**Two distributions overlaid** — before and after, control and variant. This is where a histogram becomes an argument rather than a description, and it needs transparency to work: opaque bars hide whichever series is drawn second._

![A histogram drawn by Highcharts from a source data series](https://systergon.com/blog/figma-charts-histogram/images/histogram-highcharts.svg)

_**Highcharts computes the bins for you** — its histogram is a derived series attached to a source series of raw values, which is why its examples ship the underlying scatter alongside. You supply observations; the library decides the intervals unless you override them._

![A histogram with a fitted bell curve drawn by Highcharts](https://systergon.com/blog/figma-charts-histogram/images/histogram-bell-curve.svg)

_**With a normal curve overlaid** — useful when the question is “is this distribution normal?”, and misleading when the answer is no and the curve is drawn anyway. The curve is a model, not a measurement; label it as one._

## The bin width is the chart

Everything else on this page is detail next to this. Too few bins and real structure disappears into a smooth mound; too many and random noise looks like structure. The same measurements can be made to show one peak or three, and neither picture is a lie about the numbers — they are answers to different questions about resolution.

Three practical rules:

- **Try at least three widths before choosing.** If a feature — a second peak, a gap, a spike at zero — survives all three, it is in the data. If it appears at one width only, it is a bin artefact.
- **Prefer round numbers for boundaries.** Bins of 0–100ms, 100–200ms are readable; bins of 0–87ms are not, even when an algorithm chose them optimally.
- **State the width.** “50ms bins” in the axis title or the caption costs four words and makes the chart reproducible. Without it, the reader cannot tell whether the shape is the data or the setting.

And one specific trap: **a spike in the first bin usually means zeros.** Missing values coerced to 0 — which the plugin does with unparseable numeric cells — pile up at the left edge and look exactly like a real cluster of very small measurements.

## When a histogram is the wrong chart

**1. You have few observations.** Below about thirty values the bars are counting noise, and the shape changes completely with one more data point. Plot the individual values instead — a [strip plot or dot plot](https://systergon.com/blog/figma-charts-scatter-plot) shows all of them and pretends nothing.

**2. You need to compare more than two distributions.** Overlaid histograms turn into mud past two series. Small multiples work, and a [box plot](https://systergon.com/figma-charts/chart-types/boxplot) per group works better when the comparison is about position and spread rather than shape.

**3. The x axis is categorical.** Then it is a bar chart, the bars should have gaps, and the order is yours to choose.

A fourth: **when the distribution is extremely skewed.** One value ten thousand times larger than the rest gives you a chart with one tall bar at the left and a very long empty axis. A logarithmic x axis fixes it honestly, and clipping the tail does not — if you clip, say how many observations are outside the frame.

## Four shapes, and what each one means

The reason to draw a distribution rather than summarise it is that the shape carries a diagnosis. Four are worth recognising on sight.

**Symmetric and single-peaked.** The textbook case, and the only one where the mean, the median and the mode agree — which is why summary statistics behave well here and badly everywhere else. Heights, measurement errors, manufacturing tolerances.

**Right-skewed.** A tall pile near the left and a long tail to the right: response times, incomes, order values, time-to-resolution. The mean sits well above the typical value, so quoting an average describes almost nobody. Percentiles are the honest summary, which is why the percentile-marked example above exists.

**Bimodal.** Two peaks, which nearly always means two populations have been mixed — mobile users and desktop users, weekday and weekend traffic, two versions of a product. This is the single most valuable finding a histogram produces, and it is invisible in every summary statistic: a mean between the two peaks describes a value almost nothing in the data actually takes.

**Uniform or spiky.** A flat distribution usually means the thing is generated rather than measured, and isolated spikes usually mean rounding, defaults or data entry — a pile at exactly 60 minutes, at 0, at 100. Those spikes are worth investigating before they are styled.

## When the histogram is right but a relative is better

Three neighbours solve problems a histogram struggles with, and all three are in the plugin.

**The box plot** compresses a distribution into five numbers, which makes comparing eight groups easy and hides the shape completely — including bimodality. Use it when position and spread are the question and you already know the shape is unremarkable.

**The strip or swarm plot** draws every observation. With a few hundred points it shows the shape and the individual values at once, with no bin decision at all, which makes it the honest choice for small samples where a histogram would be counting noise.

**The cumulative distribution** — a line rising from 0% to 100% — answers “what fraction is under this threshold?” directly, which is usually the real question behind an SLA conversation. It needs no bins, so it cannot be accused of manufacturing its own shape, and it is drawn as an ordinary [line chart](https://systergon.com/blog/figma-charts-line-chart) from sorted values.

## Building one, step by step

Six screens, start to finish, captured from the plugin.

![The Figma Charts gallery filtered to the Histogram category](https://systergon.com/blog/figma-charts-histogram/images/step-gallery.webp)

_**1. Filter to Histogram.** Two libraries have the category — Google Charts with five examples and Highcharts with two. Both compute bins from raw values rather than expecting pre-counted bins._

![The Figma Charts editor with a histogram in the preview](https://systergon.com/blog/figma-charts-histogram/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below. Set the width you will actually ship at before choosing bins: the same bin count reads differently at 400px and 900px._

![The Data tab showing a column of raw observations for a histogram](https://systergon.com/blog/figma-charts-histogram/images/step-data.webp)

_**3. Raw values, not counts.** This is the step people get wrong: the table holds your observations_, one per row, and the library does the counting. If you already have bin counts, you have a bar chart with the gaps removed.

![The Configuration tab showing histogram option groups](https://systergon.com/blog/figma-charts-histogram/images/step-config.webp)

_**4. Bins.** Bin count or bin width, plus the axis range. This is the panel where the chart is actually made — everything else is styling._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-histogram/images/step-export.webp)

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript — and for a histogram, check that the exported config carries your bin settings rather than the library defaults._

![The + SVG and + PNG insert buttons](https://systergon.com/blog/figma-charts-histogram/images/step-insert.webp)

_**6. Insert.** SVG keeps each bin as a rectangle and the axis as real text, so marking a percentile or shading a region is a canvas operation._

## The data shape it needs

One column of numbers — the observations themselves, one per row. That is the whole shape, and it is unusual in this series: nearly every other chart type takes summarised data, and a histogram takes the raw material.

Both libraries compute the bins. Google Charts buckets the values you give it; Highcharts attaches a histogram series to a source series and derives the bins from that, which is why its gallery examples ship the underlying scatter of raw points alongside the bars. Either way, **the counting happens in the chart, not in your spreadsheet** — so changing the bin width never means re-preparing the data.

Histograms accept a linked data source, so a column of measurements from a Sheet or an API can drive one directly — see [live data from Google Sheets and APIs](https://systergon.com/blog/figma-charts-live-data-from-google-sheets-and-apis). Watch the coercion caution: unparseable cells become 0 and pile into the leftmost bin, which is indistinguishable from a real cluster of tiny values.

## Library by library

Only two of the five have a Histogram category, and the **7 examples** split Google Charts 5, Highcharts 2.

- **Google Charts — 5 examples**, and the simplest path: hand it raw values and it buckets them. Its set covers the useful cases — a plain histogram, a multi-series comparison, a response-time distribution, a dense one and a percentile-marked one.
- **Highcharts — 2**, and the more powerful model: the histogram is a _derived_ series computed from a source series, which means the raw data and its distribution can be shown in the same chart. Its bell-curve example goes further and fits a normal distribution over the bars. Commercial licence required to ship commercially.
- **ECharts, ApexCharts and Nivo — no Histogram category.** ECharts ships a histogram built with a custom series, filed under Scatter, which is a reminder that “no chip” is not “cannot draw”. For the other two the practical route is to bin the data yourself and draw a bar chart with the gap width set to zero — which is what a histogram is, mechanically.

As always: **design in whichever library your engineers already use**, because the export then matches production exactly. [Choosing the right chart library](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library) covers the trade-offs.

## Styling it well

**No gaps between bars.** This is the one styling rule that carries meaning rather than taste. A hairline separator in the background colour is acceptable; a real gap turns your continuous axis into a categorical one visually.

**One colour.** Every bar is the same measure, so per-bar colour encodes nothing. The exception is deliberate emphasis — shading the bins beyond a threshold, for instance — which is a second variable and should be legible as one.

**Label the axis with the unit and the bin width.** “Response time (ms, 50ms bins)” tells the reader everything they need to reproduce the chart.

**Mark the summary statistics you want read.** A median line, a p95 line, a target threshold — these turn a description into a decision aid, and they are far more useful on a histogram than a legend.

**Give the tail room.** Skewed data tempts you to crop, and cropping is the one change that alters the conclusion. If the tail is long, use a log axis or an explicit “12 values above 2,000ms not shown” note.

For type and colour, bind them to your design system rather than picking by hand — covered in [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Reading it well — and the ways it misleads

**Bin width can manufacture or erase a finding.** The second mode that disappears at coarse bins, the “gap” that is really two adjacent empty intervals — both are artefacts of resolution. Always check a feature at more than one width before building a decision on it.

**The average is usually the wrong summary.** Skewed distributions — response times, incomes, order values, almost everything measured in the wild — have means pulled far from the typical value by the tail. That is precisely why the histogram exists: it shows the shape the average conceals. Having drawn one, do not then quote the mean as though it described the middle.

**Frequency versus density.** With unequal bin widths, bar height must be frequency _density_ (count divided by width), not raw count, or wide bins look tall for no reason. Equal bins avoid the problem entirely, which is a good argument for them.

**Counts hide sample size.** Two histograms with identical shapes may summarise fifty observations and fifty thousand. If you are comparing distributions, state the counts.

**A fitted curve is a claim.** An overlaid normal curve says “this is normally distributed”. If it clearly is not — if the data is skewed or bimodal — the curve is a decoration that flatters a model rather than describing your data.

## Accessibility

**Do not rely on overlay transparency alone.** Two overlaid distributions distinguished only by translucent colour fail for readers with colour vision deficiency and print badly. Outlines with different stroke patterns, or small multiples, work for everyone.

**Mark thresholds with lines and labels, not just colour.** A shaded “over SLA” region needs its boundary labelled with the value.

**Give it a text equivalent.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the numbers and a description attached to the Figma node. For a histogram, a summary sentence carries more than a bin-by-bin table: the median, the spread, the shape, the tail.

## Common questions

### What is the difference between a histogram and a bar chart?

A bar chart compares categories you chose and its bars have gaps; a histogram shows the distribution of a continuous measurement, its x axis is a number line, and its bars touch. Reordering a bar chart is often useful; reordering a histogram is meaningless.

### How many bins should I use?

Enough to show structure, few enough to avoid noise — and the honest method is to try at least three widths. A feature that survives all three is in the data; one that appears at a single width is an artefact of the setting. Prefer round boundaries and state the width on the chart.

### Do I give the chart raw values or counts?

Raw values, one observation per row. Both libraries that have this category compute the bins themselves — Google buckets the values, Highcharts derives a histogram series from a source series. If you already have counts, you are drawing a bar chart with no gaps.

### Which libraries can draw a histogram?

Google Charts (5 examples) and Highcharts (2) have the category. ECharts builds one with a custom series filed under Scatter. For ApexCharts and Nivo, bin the data yourself and draw a zero-gap bar chart.

### Why does my histogram have a big spike at zero?

Most often because missing values became zeros. In a column judged numeric, a cell that will not parse becomes 0, and those pile into the leftmost bin looking exactly like a real cluster of very small values. Clean the source before binding it.

### Should the y axis start at zero?

Yes. The bars encode counts as length from a baseline, so the zero-baseline rule applies exactly as it does to a bar chart.

### How do I show two distributions together?

Two is the limit for overlaying, and it needs transparency plus distinct outlines. Beyond two, use small multiples with a shared axis range, or switch to box plots, which compare position and spread compactly at the cost of hiding shape.

### Does the chart stay editable in Figma?

Insert as **SVG** and each bin is a real rectangle with real axis text, so shading a region or adding a percentile line happens on the canvas. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Histogram, and put a column of real measurements in — then change the bin width three times and watch what survives. Whatever is still there at every width is the finding, and it is usually more interesting than the average anybody was about to quote.

[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Browse all 45 chart types →](https://systergon.com/figma-charts/chart-types)