# How to Make a Pareto Chart in Figma (Finding the Vital Few)
_August 27, 2026 · 11 min read · by Systergon_
> A Pareto chart turns “we have forty types of defect” into “six of them are the problem”. Sorted bars carry the counts, a cumulative line climbs across them, and where the line crosses 80% you have your short list. The dual axis that must be pinned to 100%, the sorting rule nobody may break, and the categories that ruin it.
Tags: Figma, Charts, Pareto Chart, Quality, Plugin
URL: https://systergon.com/blog/figma-charts-pareto-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the Pareto gallery →](https://systergon.com/figma-charts/chart-types/pareto)

A Pareto chart answers one question and answers it decisively: **how few causes account for most of the effect?** Sorted bars carry the individual counts, a cumulative line climbs across them, and where that line crosses 80% you have your short list. It is the chart that turns “we have forty types of defect” into “six of them are the problem”.

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

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

Underneath it is a [combo chart](https://systergon.com/blog/figma-charts-combo-chart) with strict rules — sorted bars, a cumulative line, a second axis running 0 to 100% — and every one of those rules is load-bearing. This page is about them, and about the case people forget to check: what to do when the distribution is not skewed at all.

## 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 bars and the cumulative line are the library’s own output.

[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 **Pareto** from the category filter. One example, from Highcharts — and, as ever, that number is about chips rather than capability.

## Four rules, all load-bearing

- **The bars are sorted descending.** Not alphabetically, not by category order — by value, largest first. An unsorted Pareto produces a wandering cumulative line that means nothing, which is why sorting is a requirement rather than a preference.
- **The line is cumulative.** Each point is the running total of everything to its left, expressed as a percentage of the whole. It only ever rises, and it always ends at 100%.
- **The second axis is 0–100%.** This is a genuine second unit — counts on the left, percentage on the right — which is exactly when a dual axis is honest.
- **The 80% line is a reference.** Draw it. The chart’s entire purpose is to let a reader drop a line from the crossing point and read off the short list.

Get those four right and the chart does something no bar chart can: it shows both the individual sizes and the accumulated share at the same time, so “how much would we fix by handling the top five?” is answerable by eye.

## The chart underneath, and the one beside it

![A sorted bar chart drawn by Highcharts](https://systergon.com/blog/figma-charts-pareto-chart/images/pareto-sorted-bar.svg)

_**The bars on their own** — a sorted bar chart, which answers “which is biggest?” precisely. What it cannot answer is “how much of the total do the top five cover?”, because the reader would have to add up the bars themselves. That addition is what the cumulative line does for them._

![A bar chart with a trend line drawn by Google Charts](https://systergon.com/blog/figma-charts-pareto-chart/images/pareto-combo.svg)

_**A general bars-plus-line combo** — the construction a Pareto is built from. The difference is discipline: here the line is a trend fitted to the bars; in a Pareto it is a cumulative percentage on its own axis, and the bars must be sorted._

## The check nobody does: is your distribution actually skewed?

The Pareto principle is an observation, not a law. Plenty of real datasets are not concentrated at all — and a Pareto chart of a flat distribution is a diagonal line and a row of similar bars, which reads as a finding and is the opposite of one.

The test takes seconds: **look at where the line crosses 80%**. If it happens in the first fifth of your categories, you have concentration and the chart is doing real work. If it takes 60% of the categories to reach 80% of the volume, the honest conclusion is “there is no small set of causes” — which is a valuable finding, and it should be stated in a sentence rather than dressed up in a chart that implies the opposite.

The related failure is **choosing the categorisation that produces concentration**. Group your defects one way and six causes cover 80%; group them another way and it takes twenty. Both charts are true; the categorisation is doing the arguing, so it belongs in the caption.

## When a Pareto chart is the wrong chart

**1. The categories are not comparable causes.** A Pareto assumes every bar is the same kind of thing counted the same way. Mixing “network errors” with “Tuesday” produces a chart that sorts fine and means nothing.

**2. Severity matters more than frequency.** The classic misuse: the most _common_ defect is rarely the most _expensive_ one. If impact varies, weight the bars by cost or time rather than counting occurrences — a Pareto of frequency will send a team to fix the cheap problems first.

**3. You have very few categories.** With five categories, the cumulative line adds nothing a sorted bar chart and a sentence do not already provide.

A fourth: **when the tail is the point.** A Pareto is designed to justify ignoring the long tail. If your question is about the tail — rare but serious failures, niche use cases — the chart is built to argue against you.

## Using one to actually decide something

A Pareto chart is a decision instrument, and it works best inside a short loop rather than as a one-off graphic.

**1. Decide the unit before you count.** Occurrences, hours lost, revenue at risk, customers affected. This choice determines the ranking, and it is the step teams skip.

**2. Draw it, then look at the crossing.** Where the cumulative line meets 80% is the short list. If it lands after two categories, be suspicious of the categorisation; if it lands after twenty, the work is diffuse.

**3. Re-draw with a different unit.** A Pareto of frequency and a Pareto of cost usually disagree, and the disagreement is the most valuable output of the exercise: the common problems and the expensive ones are rarely the same problems.

**4. Publish the one that answers the question being asked**, with the unit in the title. “Defects by count” and “Defects by engineering hours” are different charts, and presenting either without the qualifier invites the wrong decision.

## Where the 80/20 idea came from, and what it is not

The principle is named after an observation about land ownership in Italy at the end of the nineteenth century: a small share of the population held most of the land. It was generalised into a rule of thumb about distributions in the mid twentieth century by quality-management writers, and the chart followed.

Two things worth knowing about that lineage. First, **it was always an observation about particular datasets**, never a law that any dataset must obey — which is why checking your own crossing point matters more than assuming the ratio. Second, **the chart came from manufacturing quality control**, where the categories are defect types and the counts are occurrences of physical failures. That is a domain where frequency and impact correlate reasonably well.

Most modern uses — support tickets, feature requests, error logs — are domains where they correlate badly. A single outage affecting every customer is one incident; a cosmetic bug reported forty times is forty. A Pareto counting occurrences will rank the cosmetic bug higher, which is exactly backwards, and it is the most common way this chart misdirects a team.

## Building one, step by step

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

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

_**1. Filter to Pareto.** Highcharts has the only example — its Pareto series computes the cumulative line for you from a source column series._

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

_**2. The editor.** Live preview above, tabs below. Check the sort immediately: if the bars are not descending, the cumulative line is meaningless and everything else is wasted effort._

![The Data tab showing categories and counts behind a Pareto chart](https://systergon.com/blog/figma-charts-pareto-chart/images/step-data.webp)

_**3. Categories and counts.** One row per cause with its count — the ordinary table. The cumulative percentages are computed, not supplied, which is the whole convenience of using a Pareto series rather than assembling a combo._

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

_**4. Configure.** The secondary axis range (0–100), the reference line at 80%, and the styling of bars against line. This is where the chart becomes a decision aid rather than a picture._

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

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript — and the config carries the Pareto series definition, which is the part a hand rebuild usually gets wrong._

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

_**6. Insert.** SVG gives you the bars, the line and the axes as separate layers, so the 80% crossing can be annotated on the canvas — which is usually the one thing the chart is for._

## The data shape it needs

A label and a count per category — the ordinary cartesian table. Everything else is derived: the sort order, the cumulative percentages and the secondary axis are all computed by the chart, which is why using a real Pareto series beats assembling one by hand.

Two data decisions carry the analysis. **What you are counting** — occurrences, hours lost, revenue at risk — because a Pareto of frequency and a Pareto of cost frequently disagree about which causes matter. And **how the categories are defined**, since the level of grouping determines how concentrated the distribution appears.

Pareto charts accept a linked data source like any bar-shaped chart, so a defect log or a ticket export in a Sheet can drive one — see [live data from Google Sheets and APIs](https://systergon.com/blog/figma-charts-live-data-from-google-sheets-and-apis). Watch the usual coercion: an unparseable count becomes 0 and sorts to the end, silently dropping a category to the tail.

## Library by library

The **Pareto** category holds **one example, in Highcharts** — but this is a chart you can build anywhere, because it is a combo with rules.

- **Highcharts — 1 example**, and the only dedicated Pareto series in the plugin: it derives the cumulative line from a source column series, so the arithmetic is done for you and stays correct when the data changes.
- **Everyone else — assemble it.** Sort your categories descending, compute the running percentage in the source, then draw a column series plus a line series on a secondary 0–100% axis. Google Charts, ECharts and ApexCharts all mix series types happily — see the [combo chart post](https://systergon.com/blog/figma-charts-combo-chart) — and Nivo needs the two components composed in React.

The one thing to preserve when hand-building it: **the cumulative values must be recomputed whenever the data changes**. A stale cumulative line on fresh bars is the most common way a hand-assembled Pareto goes quietly wrong.

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

**Bars quiet, line prominent.** The bars are the detail and the line is the argument. A muted bar colour with a saturated line reads correctly; two strong colours fight.

**Draw the 80% reference and label it.** A horizontal rule at 80% on the right axis, with a vertical drop at the crossing point if you want to be explicit about the short list. This is the single highest-value addition to the chart.

**Colour the vital few.** Shading the bars left of the crossing point in an accent colour and the rest in grey turns the chart into a recommendation. It is a strong move — make sure the threshold is defensible before making it.

**Label both axes with units.** “Defects” on the left, “Cumulative %” on the right. Unlabelled dual axes are where combo charts go wrong.

**Limit the categories shown.** Fifteen bars is plenty; beyond that, group the tail into “other” — which is exactly what the chart is telling you to do anyway.

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

## Choosing the threshold honestly

The 80% line is conventional and the number is yours to set. Three ways to choose one you can defend:

**By capacity.** If the team can address five causes this quarter, draw the line at five categories and read off what share that covers. This inverts the usual reading and is often the more useful direction: not “what covers 80%” but “what does our actual capacity buy?”

**By natural break.** Many distributions have a visible step where the bars drop sharply. Cutting there is easier to justify than cutting at an arbitrary percentage, and readers can see the reason in the chart.

**By diminishing returns.** Where the cumulative line flattens, each additional category adds little. That inflection is a genuine feature of the data rather than an imported convention, and pointing at it makes a stronger argument than pointing at 80%.

## Reading it well — and the ways it misleads

**80% is a convention, not a finding.** There is nothing magic about the number; it comes from an observation about income distribution a century ago. Use whatever threshold your situation justifies, and say why.

**The categorisation is the argument.** Concentration can be manufactured by grouping causes coarsely or dissolved by splitting them finely. Two teams can produce contradictory Pareto charts from one dataset without either lying.

**Frequency is not impact.** The most common cause is not necessarily the most costly, and a Pareto sorted by count will direct effort to the cheap end unless you weight the bars.

**The cumulative line always looks encouraging.** It rises monotonically to 100% in every dataset, concentrated or not, which is why the crossing point matters and the shape alone does not.

**A dual axis needs watching.** The bars’ axis and the percentage axis are independent, so where the line appears to sit relative to the bars is a scaling artefact. Read the line against its own axis only.

## Three variants worth knowing

**The weighted Pareto.** Bars carry cost or impact rather than counts, which usually reorders the chart entirely. If a team is choosing what to fix, this is almost always the version they need.

**The before-and-after Pareto.** Two charts of the same categories, before an intervention and after it, with the category order fixed from the first. Keeping the order lets a reader see which bars actually moved — re-sorting the second chart makes the comparison impossible, and it is the standard mistake.

**The comparative Pareto.** One chart per segment — region, plan tier, platform — as small multiples with a shared category order. Concentration that differs by segment is usually a more actionable finding than the aggregate, and it is invisible in a single combined chart.

All three are the same construction with different inputs, which is the useful thing about this chart: once the sorting and cumulative arithmetic are in place, the variants are a matter of what you feed it.

## Accessibility

**Bars and a line are already distinguishable without colour** — the mark types differ, which is this chart’s built-in advantage. Keep it by not adding a second bar series.

**Label the crossing point in text.** “Top 6 categories = 81% of defects” as an annotation states the finding without requiring anyone to trace a line to an axis.

**Match axis label colours to their series** so the two scales are identifiable at a glance.

**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. Include the cumulative column — it is the part of the chart that is doing the analysis.

## Common questions

### What is a Pareto chart for?

Showing how few causes account for most of an effect. Sorted bars give the individual counts, a cumulative line gives the running share, and the point where that line crosses 80% identifies the short list worth acting on.

### Do the bars have to be sorted?

Yes. The cumulative line accumulates left to right, so an unsorted chart produces a line that wanders and communicates nothing. Sorting descending is a requirement of the form, not a styling choice.

### Which libraries can draw one?

**Highcharts** has the only dedicated Pareto series in the plugin. Everywhere else, assemble it: sort descending, compute the cumulative percentage in the source, then draw columns plus a line on a secondary 0–100% axis.

### Is the 80/20 rule real?

It is an observation that holds in many datasets and not in all of them. Check where your line actually crosses 80% — if it takes most of your categories to get there, the honest finding is that there is no vital few, and that is worth saying plainly.

### Should I count occurrences or weight by impact?

Weight by impact whenever impact varies. A Pareto of frequency sends teams to the most common problem, which is often the cheapest one to live with. Cost, hours lost or revenue at risk usually produce a more useful ordering.

### How many categories should it show?

Up to about fifteen bars. Beyond that, group the tail into an “other” category — which is what the chart exists to justify anyway — and note how many categories it contains.

### Is a Pareto chart just a combo chart?

Structurally yes, with rules: sorted bars, a cumulative line, a percentage axis and a reference threshold. Those constraints are what turn a general bars-plus-line chart into a decision aid.

### How do I compare a Pareto before and after a fix?

Draw both with the _same_ category order — fixed from the first chart — rather than re-sorting the second. Re-sorting makes it impossible to see which categories actually moved, which is the entire question. Small multiples with a shared order are the honest layout.

### Does the chart stay editable in Figma?

Insert as **SVG** and the bars, line and axes are separate layers — ideal for annotating the crossing point, which is usually the reason the chart was drawn. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Pareto, put your categories in, and look at one thing: how far along the axis the line reaches 80%. If it is the first few bars, you have a short list and a chart worth presenting. If it is most of the way across, you have learned that the work is diffuse — which is more useful than a chart implying otherwise, and takes one sentence to report.

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