# How to Make a Box Plot in Figma (and What the Five Numbers Hide)
_August 26, 2026 · 11 min read · by Systergon_
> A box plot compresses a whole distribution into five numbers, so eight distributions fit where one histogram would go. It will tell you which group runs slower, which is more variable and which has outliers — and it will hide, completely and silently, the fact that one of your groups contains two populations. What each mark means, what the summary cannot say, the relatives that fix it, and using one in a performance review.
Tags: Figma, Charts, Box Plot, Statistics, Plugin
URL: https://systergon.com/blog/figma-charts-box-plot
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the box plot gallery →](https://systergon.com/figma-charts/chart-types/boxplot)

A box plot compresses a whole distribution into five numbers — minimum, lower quartile, median, upper quartile, maximum — so that eight distributions fit in the space one [histogram](https://systergon.com/blog/figma-charts-histogram) would need. It is the chart for comparing _spread_ across groups, and it is the only common chart whose entire content is a summary rather than the data.

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

_Real plugin output: a Highcharts box plot captured from the editor. Every chart on this page is the library’s own drawing._

That compression is the trade. A box plot will tell you which group runs slower, which is more variable and which has outliers — and it will hide, completely and silently, the fact that one of your groups has two distinct populations in it. Knowing what the five numbers cannot say is the point of this page.

## 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 boxes and whiskers on your canvas are the library’s own geometry.

[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 **Box Plot** from the category filter. There are **8 examples** across four libraries.

## What the five numbers say

Each box is one group, and the marks mean specific things:

- **The box** spans the interquartile range — the middle 50% of the observations. Its height is the spread of the typical half of your data.
- **The line inside it** is the median, not the mean. Half the observations sit either side of it, which is why a box plot is robust to the outliers that drag averages around.
- **The whiskers** reach to the furthest observations within a defined distance — conventionally 1.5× the interquartile range from the box.
- **The points beyond them** are outliers, drawn individually because they are the observations most worth naming.

One more mark appears in some implementations and is worth recognising: a **notch** pinched into the box around the median, which shows a confidence interval for it. Two boxes whose notches do not overlap are conventionally read as having significantly different medians — a genuinely useful shortcut, and one to use only when the sample sizes justify it.

The shape carries the diagnosis: a median sitting low in its box means the middle half is right-skewed; a tall box means a variable group; a long whisker on one side means a tail. All of that is legible across eight groups at once, which is what no other chart in this series can do.

## Five box plots, and what each one adds

![A box plot with outliers marked drawn by Highcharts](https://systergon.com/blog/figma-charts-box-plot/images/boxplot-outliers.svg)

_**With outliers** — the version to prefer. Points beyond the whiskers are drawn individually, so the reader sees both the summary and the observations that escaped it. A box plot with outliers suppressed is hiding the most actionable part of the data._

![A box plot of light velocity measurements drawn by ECharts](https://systergon.com/blog/figma-charts-box-plot/images/boxplot-echarts.svg)

_**The classic dataset** — Michelson’s light-velocity experiments, five runs of the same measurement. It is the canonical demonstration of what box plots are for: not the values, but whether the runs agree with each other._

![A multi-category box plot drawn by ECharts](https://systergon.com/blog/figma-charts-box-plot/images/boxplot-multi-category.svg)

_**Many groups at once** — where the form earns its keep. Twenty boxes are still readable, and twenty histograms would be a wall._

![A horizontal box plot drawn by ApexCharts](https://systergon.com/blog/figma-charts-box-plot/images/boxplot-horizontal.svg)

_**Horizontal** — the orientation to use when your group names are phrases. It also suits a long list of groups, because vertical space is cheaper than horizontal space on most screens._

![A box plot drawn by Nivo](https://systergon.com/blog/figma-charts-box-plot/images/boxplot-nivo.svg)

_**Nivo’s box plot** — the D3 look, with generous spacing and subdued whiskers. React-only export._

## What a box plot cannot show you

This is the section that matters, because the failure is invisible.

**Bimodality.** A group with two clusters — fast mobile responses and slow desktop ones, or two versions of a product mixed together — produces a perfectly ordinary box. The median falls between the two clusters, where almost no observation actually sits, and the box spans a range that is mostly empty. Nothing in the chart hints at it. This is the single most important limitation of the type, and the reason to look at a [histogram](https://systergon.com/blog/figma-charts-histogram) at least once before publishing a box plot.

**Sample size.** A box drawn from nine observations and one drawn from ninety thousand look identical. Quartiles from a handful of points are extremely unstable, so a box plot of small samples projects a confidence the data has not earned. State the counts, or use a variable box width where the library supports it.

**The shape inside the box.** Half your data is in there and the chart says only where it starts and stops. Whether it is packed against the median or spread evenly is invisible.

The standard fix for all three is to **overlay the observations** — a jittered strip of points behind or beside the box. You keep the summary and you show the data, and with a few hundred points it costs nothing but a little transparency.

## When a box plot is the wrong chart

**1. Your audience does not read quartiles.** This is a statistical chart with a real learning curve: readers who have not met one before frequently think the box is a bar, or that the whiskers are error bars. For a general audience, a [bar chart](https://systergon.com/blog/figma-charts-bar-chart) of medians with a range annotation communicates more reliably, even though it carries less.

**2. You have one group.** A single box wastes the type’s advantage, which is comparison. One distribution is a histogram’s job — it shows the shape a box plot compresses away.

**3. The individual values matter.** Below about twenty observations per group, plot the points. A strip or swarm plot shows everything, invents no quartiles and asks less of the reader.

A fourth: **when the distributions are all similar.** Eight nearly-identical boxes is a chart that took work and says “no difference” — which is a legitimate finding, and usually better stated in a sentence with a single chart supporting it.

## The relatives, and when each one wins

The box plot sits in a family of distribution-comparison charts, and three of its relatives fix specific weaknesses. All three are in the plugin.

**The violin plot** replaces the box with a mirrored density curve, so the shape inside the distribution becomes visible — including the two humps a box plot conceals. It costs width per group and it asks more of the reader, and it is the right answer when shape genuinely matters across several groups.

**The [swarm plot](https://systergon.com/figma-charts/chart-types/swarmplot)** draws every observation, offset so points do not overlap. Nothing is summarised and nothing is hidden, which makes it the honest choice for tens or low hundreds of points per group. Nivo ships one.

**The strip plot with a median marker** is the minimal version of the same idea: jittered points plus one line for the median. It communicates almost everything a box plot does, hides nothing, and requires no quartile vocabulary from the reader — which for a general audience is often the deciding factor.

The general rule: as sample size per group falls, move towards showing the points; as the number of groups rises, move towards summarising them. Box plots occupy the middle of that space, which is why they are the default for “several groups, plenty of data each”.

## Using one in an engineering or product review

The commonest real use of this chart is performance: response times by endpoint, build durations by pipeline, task times by cohort. Three practical notes from that context.

**Log the axis when the data is heavy-tailed.** Latency distributions routinely span three orders of magnitude, and a linear axis squashes every box into the bottom tenth of the chart while one whisker occupies the rest. A logarithmic value axis makes all the groups readable at once — and must be labelled clearly, because a log axis changes what “twice as far” means.

**Quartiles are not percentiles anyone has an SLA on.** Teams commit to p95 and p99; a box plot shows p25, p50 and p75, with everything above the whisker as scattered dots. If the conversation is about the tail, the box plot is showing the wrong part of the distribution — add explicit percentile markers, or use a chart of the percentiles themselves.

**Order by median, and keep that order stable between reviews.** A ranking that reshuffles every week makes it impossible to see whether anything improved. Fix the order once — alphabetical, or by the first review’s ranking — and let the boxes move within it.

## Building one, step by step

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

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

_**1. Filter to Box Plot.** Four libraries have it — ECharts, ApexCharts, Highcharts and Nivo. Google Charts has none._

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

_**2. The editor.** Live preview above, tabs below. Box plots need width per group; check how many boxes fit before committing to a grouping._

![The Data tab showing the five-number summary values behind a box plot](https://systergon.com/blog/figma-charts-box-plot/images/step-data.webp)

_**3. Five numbers per group.** Minimum, lower quartile, median, upper quartile, maximum — the plugin treats this as the same OHLC-style shape a candlestick uses, because both are four or five values per category. In ECharts and Nivo it is edited as JSON rather than a table._

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

_**4. Configure.** Whisker rules, outlier display, box width and orientation. Turning outliers on is usually the right default._

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

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript at the version the plugin rendered with._

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

_**6. Insert.** SVG keeps each box, whisker and outlier point as its own vector, so an outlier can be labelled by name on the canvas — which is usually what a reader wants to know._

## The data shape it needs

Box plots take a **five-number summary per group**, and the plugin classifies that alongside candlesticks — both are “several ordered values per category”. In practice you supply either the computed quartiles or, in the libraries that support it, the raw observations for the library to summarise.

Two plugin-specific things to know. **In ECharts and Nivo the box plot is edited as JSON rather than a table**, because the structure carries outlier arrays alongside the summary values and a flat table cannot express both. And **box plots cannot bind a live data source in ECharts or Nivo** — the plugin blocks the connection rather than corrupting the chart, for the same reason. Highcharts and ApexCharts box plots are not restricted.

If you are computing quartiles yourself, state the method. There are several conventions for quartiles on small samples and they disagree — not enough to change a conclusion, but enough that two teams charting the same data can produce visibly different boxes.

## Library by library

The **8 examples** split ECharts 3, Highcharts 2, ApexCharts 2, Nivo 1 — and **Google Charts has no box plot**. Its documentation shows the shape built out of a candlestick with custom whiskers, which is a workaround rather than a type.

- **ECharts — 3 examples**, including the multi-category layout that handles many groups, and the classic light-velocity dataset. Edited as JSON in the plugin.
- **Highcharts — 2**, with the most complete option set: whisker length rules, outlier styling and a proper series type. Commercial licence required to ship commercially.
- **ApexCharts — 2**, basic and horizontal, with clean defaults and a table-editable data shape.
- **Nivo — 1**, the D3 look; React-only export, JSON editing.
- **Google Charts — none.** If your stack is Google Charts, the practical options are a candlestick-based approximation or a different comparison chart.

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

**One colour unless colour means something.** Every box is the same measure across groups, so per-box hues encode nothing. Colour is available for a real second variable — before and after, control and variant — and should be reserved for it.

**Make the median line unmistakable.** It is the most-read mark in the chart and it is easy to lose against the box fill. Heavier weight, or a contrasting colour, or a white line on a filled box.

**Keep the whiskers thinner than the box outline.** They carry less precise information — a range rather than a boundary — and drawing them at equal weight makes the box look four-sided rather than central.

**Sort the groups by median.** Unless the categories have a natural order, sorting turns a set of boxes into a ranking and makes the comparison immediate.

**Label the outliers.** An unlabelled outlier prompts a question the chart cannot answer. If there are few enough, name them — that is usually the reason someone will act on the chart at all.

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

**The box is not a confidence interval.** It is the middle half of the observations. Readers who have met error bars often read the box as uncertainty about the median, which is a different quantity entirely — and a notched box plot, where the notch _is_ a confidence interval around the median, sits right next to it in the same visual language.

**The whiskers are a convention, not a measurement.** The usual 1.5× interquartile-range rule is one choice among several; some libraries default to the true minimum and maximum instead. Two charts of identical data can show different whiskers, so state the rule if the whiskers carry weight.

**“Outlier” is a definition, not a verdict.** A point beyond the whiskers is unusual relative to that group by an arbitrary rule. It is not necessarily an error, and in skewed data perfectly ordinary observations get flagged in numbers.

**Equal box heights do not mean equal groups.** Two groups with the same quartiles can have wildly different sample sizes and completely different shapes inside the box.

**The median is not the mean, and stakeholders will read it as one.** That is usually an improvement — the median is the more honest centre for skewed data — but it is worth labelling explicitly when the audience is used to averages, because the two numbers can differ substantially and someone will notice.

## Accessibility

**Do not rely on colour to separate paired boxes.** Before-and-after comparisons drawn as two hues need position and labels as well — adjacent pairs with a group label carry the pairing without colour.

**Give the marks enough size.** Outlier dots and median lines are the two smallest marks in the chart and the two most informative; both need to survive at the size you ship.

**Explain the encoding in a caption when the audience is general.** One sentence — “box = middle 50%, line = median, dots = outliers” — makes the chart readable for people meeting it for the first time, and costs nothing to those who already know.

**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 written onto the Figma node. A box plot’s table is unusually complete, because the chart’s entire content is five numbers per group.

## Common questions

### What do the parts of a box plot mean?

The box is the middle 50% of observations (the interquartile range), the line inside is the median, the whiskers reach to the furthest points within a defined distance — usually 1.5× the interquartile range — and points beyond them are drawn individually as outliers.

### Box plot or histogram?

A histogram shows one distribution’s shape; a box plot compares many distributions’ positions and spreads. Use the histogram when the shape matters — especially to check for two peaks, which a box plot hides completely — and the box plot when you have several groups to compare.

### Why can a box plot hide two populations?

Because it only records five positions. If a group has two clusters, the median lands between them where almost nothing sits, and the box spans a range that is mostly empty. The chart looks entirely normal. Check a histogram or overlay the raw points before publishing.

### Should I show outliers?

Yes, in nearly every case. They are the observations most likely to prompt action, and suppressing them makes the chart look tidier while removing its most useful content. Label them where there are few enough.

### Which libraries can draw a box plot?

Four of the five: ECharts (3 examples), Highcharts (2), ApexCharts (2) and Nivo (1). **Google Charts has none** — the shape can be approximated with a candlestick, but there is no box plot type.

### Why does my box plot open a JSON editor?

In ECharts and Nivo the box plot data carries outlier arrays alongside the five summary values, which a flat table cannot express — so the plugin edits it as JSON. Those two also cannot bind a live data source for this type; Highcharts and ApexCharts can.

### Can I show the individual points as well?

Yes, and it is the best fix for everything a box plot hides: a jittered strip of observations behind or beside each box keeps the summary and shows the data. With a few hundred points it costs only a little transparency; Nivo also ships a dedicated swarm plot.

### Does the chart stay editable in Figma?

Insert as **SVG** and each box, whisker and outlier point is a separate vector, so an outlier can be labelled by name on the canvas. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Box Plot, and put several real groups in — then, before you ship it, draw one of those groups as a histogram. If the shape is a single hump, the box plot is telling the truth and you have a compact comparison. If there are two humps, you have just avoided publishing a chart that hides the most interesting thing in your data.

[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)