# How to Make a Funnel Chart in Figma (and What the Shape Promises)
_August 26, 2026 · 14 min read · by Systergon_
> A funnel is a bar chart that has been given a story. The taper carries a claim no bar chart makes — that each stage is drawn from the one above it, and that the narrowing is loss. When that is true it is one of the most immediately legible charts there is; when it is false the chart is fluent and wrong. What it encodes, the three times it is the wrong tool, the sorting option that will silently reorder your stages, which libraries draw one (and where ApexCharts hides its), and why the percentages matter more than the widths.
Tags: Figma, Charts, Funnel Chart, Conversion, Plugin
URL: https://systergon.com/blog/figma-charts-funnel-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the funnel gallery →](https://systergon.com/figma-charts/chart-types/funnel)

A funnel chart is a bar chart that has been given a story. The bars are stacked, centred and tapering, and the taper carries a claim that no bar chart makes: that each stage is _drawn from_ the one above it, that everyone in stage three was previously in stage two, and that the narrowing is loss. When that claim is true, the funnel is one of the most immediately legible charts there is — people read a drop-off without being taught how. When it is false, the chart is fluent and wrong, which is worse than illegible.

So this is mostly about whether your data has earned the shape. What a funnel encodes, the three times it is the wrong tool, the sorting trap that will silently reorder your stages, how to build one in Figma, what each library gives you — including the two that have no funnel category, only one of which genuinely cannot draw one — and why the percentages matter more than the widths.

![A funnel chart of website visits through to invoices, drawn by Highcharts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-funnel-chart/images/funnel-highcharts.svg)

_Real plugin output: a Highcharts funnel captured from the editor. Every funnel on this page is the library’s own drawing — including the two that are not filed under Funnel at all._

## First — get the plugin

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 funnel on your canvas is the library’s own output, with its own geometry and label placement.

[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 **Funnel** from the category filter. There are **10 funnel examples**, including the pyramids — which live in this category too.

## What a funnel is, and the question it answers

A funnel answers **“where are we losing people?”**

Each band is a stage in a process. Its width encodes how many made it that far, and the stages run top to bottom in the order they happen. The subject of the chart is not any individual band — it is the _step between_ two bands, because that gap is where the loss occurred, and the reason anyone draws a funnel is to point at a step and ask what happened there.

Two structural requirements come with that, and they are requirements rather than conventions:

- **The stages must be sequential.** Not a set of categories, an ordered process.
- **Each stage must be a subset of the one before it.** Everyone who checked out also added to basket. If someone can appear in stage four without having passed stage three, the taper is describing something that did not happen.

The family shares the geometry and varies the story:

- **The funnel** — widest at the top, narrowing downward. Process loss.
- **The pyramid** — the same shape inverted, widest at the bottom. Used for hierarchies, populations and layered models, where the bottom is the foundation rather than the survivor.
- **Mirrored funnels** — two or more side by side, often aligned to face each other, to compare cohorts or channels.
- **3D funnels and pyramids** — the same data with perspective added, which is a styling choice with consequences covered [below](#reading).

## When to use it — and three times you should not

Use a funnel when you have an ordered process, when each stage genuinely nests inside the previous one, when there are enough stages to show a shape and few enough to label — three to seven is the working range — and when the loss between stages is the point.

Three cases where it is the wrong tool, in order of how often the mistake is made:

**1. Your stages are categories, not steps.** This is the big one, and it is everywhere: five product lines sorted by revenue, drawn as a funnel because the shape looks purposeful. Sorted categories in a tapering shape assert a process that does not exist — nobody “progresses” from Product A to Product B. If your rows can be reordered without breaking the meaning, they are categories, and a sorted [bar chart](https://systergon.com/blog/figma-charts-bar-chart) is the honest chart.

**2. The question is about rates, not volumes.** A funnel shows absolute counts, so every conversion rate in it is a division the reader has to do in their head — and the interesting number in a funnel is almost always the rate. If your team’s actual question is “which step converts worst?”, then the rates are the data and a bar chart of step-to-step conversion percentages answers it directly, without anyone having to divide 4,064 by 15,654 while looking at a slide.

**3. The stages are separated by long, uneven time lags.** A funnel drawn from today’s snapshot compares people at stage one today with people at stage five today — who arrived weeks earlier, from a different campaign, under different conditions. When the journey takes longer than the reporting period, the funnel is comparing populations that have nothing to do with each other. The fix is a cohort: follow one group through, and say which group.

A fourth, less obvious: **when a stage grows.** If any band would be wider than the one above it, the metaphor has already broken — and, as the next section explains, some libraries will quietly hide the breakage by reordering the stages for you.

## The data shape it needs

A funnel takes the simplest shape in the plugin: **name and value**. One row per stage, the stage name in the label column, the count in the value column, in process order.

**And here is the trap, because it is on by default.** ECharts funnels take a `sort` option, and the plugin’s own basic funnel example ships with `sort: 'descending'`. That means the chart _re-orders your stages by value_ rather than drawing them in the order you typed them. The sample data makes this vivid: its five stages are Visit 60, Inquiry 40, Order 20, Click 80, Show 100 — and what renders is not that sequence, it is the values sorted largest to smallest. For a well-behaved funnel where every stage really does shrink, sorting by value and sorting by process order are the same thing and you will never notice. The moment a stage rises — the moment the chart has something to tell you — the sort silently rewrites your process to keep the pretty taper. Set `sort` to `'none'` when the order is the meaning, which is always.

Two more practical notes:

- **Funnels accept a linked data source in all three libraries that draw them**, and the shape is the easiest kind to bind: a two-column range from a Sheet, stage names and counts. Connecting is covered in [live data from Google Sheets and APIs](https://systergon.com/blog/figma-charts-live-data-from-google-sheets-and-apis).
- **The multi-funnel examples are layouts, not datasets.** ECharts ships two examples that place four funnels side by side (one of them mirrored, facing right). They are excellent starting points for a comparison design, but the data table flattens all four funnels into a single list of stages — so treat them as arrangements to restyle, and build genuine comparisons as separate charts, or edit the funnels one at a time in the chart’s configuration rather than through the table.

## Five funnels, and one that is filed elsewhere

The geometry is the constant. What changes is the direction, the library and — in the last case — the chart type underneath.

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

_**The pyramid** — the same shape inverted, and a different meaning: widest at the bottom reads as a foundation with layers above it, not as loss. Highcharts is the only library whose pyramids sit in the Funnel category._

![A funnel chart drawn by ECharts](https://systergon.com/blog/figma-charts-funnel-chart/images/funnel-echarts.svg)

_**ECharts’ funnel** — and a warning worth repeating: this example ships with `sort: 'descending'`, so it re-orders your stages by value rather than drawing them in process order. Set it to `none` when the order carries meaning, which is always._

![Four funnels arranged for comparison, drawn by ECharts](https://systergon.com/blog/figma-charts-funnel-chart/images/funnel-compare.svg)

_**Mirrored comparison** — several funnels aligned to face each other via `funnelAlign`, for comparing channels or cohorts. Treat these as layouts to restyle: the data table flattens all four funnels into one list._

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

_**Nivo’s funnel** — the D3 look, with part-to-part transitions between stages rather than hard steps. React-only export._

![A recruitment funnel drawn by ApexCharts as a horizontal bar chart with isFunnel enabled](https://systergon.com/blog/figma-charts-funnel-chart/images/funnel-apex-under-bar.svg)

_**And ApexCharts’ funnel, which is a bar chart.** Apex has no Funnel category — it builds one out of a horizontal bar with a single option, `isFunnel: true`, and files it under Bar. It is also the neatest illustration of this page’s argument: underneath the metaphor, a funnel is_ a sorted bar chart.

## Building one, step by step

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

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

_**1. Filter to Funnel.** Three libraries carry the category — Highcharts, ECharts and Nivo. ApexCharts’ funnels are under Bar, and Google Charts has none._

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

_**2. Funnel or pyramid.** Same geometry inverted, opposite meanings. Decide before you write the labels, because the labels depend on which one you chose._

![The Data tab showing stage names and values for a funnel](https://systergon.com/blog/figma-charts-funnel-chart/images/step-data.webp)

_**3. Your stages.** Name and value, one row per stage, in process order. Then check the rendered chart against the table — if the order differs, you have met the sort option._

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

_**4. Configure.** Sort order, the gap between bands, alignment and label placement. This is also where you add the step-to-step percentages, which are the numbers people actually act on._

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

_**5. Export.** Code for React, Vue 3, Angular, Svelte or vanilla JavaScript — or the Config alone, which carries the sort order and geometry._

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

_**6. Insert.** SVG keeps every band as a vector shape with real text, which makes funnels easy to annotate — a callout on the worst-converting step is usually the whole point._

Two shortcuts worth knowing. The **Essential / Common / Advanced** control in the editor header sets how much furniture the chart carries. And if you want to change one element rather than hunt the option tree, turn on the **Inspector** and click the thing; it works on Highcharts and ApexCharts.

## Library by library

Three of the five libraries draw funnels, and the **10 examples** are split unevenly:

![The library tabs in Figma Charts — Google, HighCharts, D3-Nivo, ApexCharts and ECharts — above the row of chart category chips for the selected library](https://systergon.com/figma-charts-help/library-tabs-light.webp)

- **Highcharts — 5 examples**, and the deepest bench in this category: a funnel, a pyramid, a 3D funnel, a 3D pyramid and a column pyramid (pyramid-shaped bars, which is a bar chart wearing the costume). It is the only library with the **3D** variants, and the only one whose pyramids sit in the Funnel category at all. It needs a commercial licence to ship in a commercial product.
- **ECharts — 4 examples**, and the most control over the geometry: `sort` for the ordering, `gap` for the space between bands, `funnelAlign` for pushing a funnel left or right so two can face each other, plus `min`/`max` to fix the width scale. Its four examples are a basic funnel, a customised one, a four-funnel comparison and a mirrored compare layout.
- **Nivo — 1 example.** The D3 look, a spectral palette by default, and genuinely good default spacing and part-to-part transitions. Remember that **Nivo exports to React only**.
- **ApexCharts — no Funnel category, but it does draw them.** This is the distinction that matters: ApexCharts builds a funnel out of a _horizontal bar chart_ with one option, `isFunnel: true`, so its two examples — a recruitment funnel and a pyramid — are filed under **Bar** rather than here. Do not read the empty Funnel chip as “ApexCharts cannot do this”; look under Bar. It is also a neat illustration of the argument below, since an ApexCharts funnel _is_ a bar chart underneath.
- **Google Charts — none, genuinely.** There is no funnel chart type in Google Charts and no example anywhere in the plugin. If your team is standardised on it, the substitute is a **sorted horizontal bar chart** — which, given everything in the section below, is frequently the better chart anyway. What you lose is the metaphor; what you gain is a common baseline and comparable lengths.

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](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library) covers the trade-offs in full.

## Styling it well

**Colour should not encode the stages.** Giving each band its own hue makes five stages look like five unrelated categories, which is the opposite of what a funnel says. Use one colour, or a single-hue ramp that darkens or lightens down the funnel, so that the shape carries the information and the colour carries the continuity.

**Put the numbers on the bands.** A funnel without labels is a decorative triangle: widths are hard to read precisely, and the whole chart usually has fewer than seven values, so there is room. Inside the band when the bands are deep enough, immediately outside when they are not.

**Show both the count and the rate.** “4,064” and “26% of previous” answer different questions and both belong. If you only have room for one, the rate is the one people act on.

**Mind the gap.** A few pixels between bands makes each stage a discrete step; no gap makes the funnel a continuous flowing shape. The first reads as a process with distinct moments, the second as a smooth loss — pick the one that matches how your process actually works.

**Skip the 3D.** A perspective funnel adds an apparent depth that carries no data and distorts the widths it is drawing, so the values become harder to compare in the one dimension that encodes them. The 3D versions exist because clients ask for them; they are a decoration and should be treated as one.

**Keep the stage labels short and parallel.** “Visited”, “Signed up”, “Activated”, “Paid” — consistent grammatical form makes a sequence read as a sequence. For type and colour, bind them to your design system rather than picking by hand, which is 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 taper is a claim about subsets, and it is often false.** The single most common funnel error is stages that are not nested: counting “emails sent” then “website visits” then “purchases” when the visits include people who never got the email. The chart says these are survivors of the previous stage; the data says they are three overlapping populations. Nothing in the rendering will warn you — the shape is drawn from whatever numbers you supply, and it always looks like a funnel.

**Width encodes the value, but the eye reads area.** Each band is a trapezoid, so a stage that is half as wide is considerably less than half as much ink, and the taper exaggerates the loss for the stages further down. It is a mild distortion compared with a 3D pie, but it is systematic and always in the same direction, which is why a funnel is a poor tool for judging _how much_ was lost and a good one for showing _that_ it was.

**Sorting is not a display preference.** A funnel whose bands are ordered by value rather than by process step is no longer a funnel — it is a ranked bar chart in a triangular frame, and it will show a tidy monotonic taper no matter how disorderly the underlying process is. This is worth checking on every funnel you inherit, because the failure mode is invisible: the chart looks more correct than the truthful version.

**A stage can legitimately grow, and that is a finding.** Re-engagement flows, returning customers, retries — there are real processes where a later stage exceeds an earlier one. A funnel cannot draw that without looking broken, which tempts people into hiding it. Do not: annotate it, or use a bar chart or a [Sankey diagram](https://systergon.com/figma-charts/chart-types/sankey), which can show flow that splits and rejoins.

**Two funnels side by side need the same scale.** Comparing channels or cohorts is one of the best uses of the form, and it only works when both funnels are drawn to a common width scale. If each is normalised to its own top stage, every funnel looks identical at the top and you have thrown away the volume comparison — which is often the actual difference between the two.

**And the bottom stage is not the conclusion.** Readers naturally focus on the narrow end, but the actionable step is usually the _biggest proportional drop_, which is frequently near the top where the absolute numbers are largest. Mark it, because the shape alone will not point at it.

## Accessibility

**Do not let width be the only encoding.** Labelled bands are readable by anyone; unlabelled ones require judging small differences in width across a tapering shape, which is exactly the kind of comparison that fails for low-vision readers. Numbers on the bands fix this for everyone at once.

**Check the label contrast band by band.** Labels inside a funnel sit on the fill, and a single-hue ramp means the same text colour crosses light and dark bands. Either flip the label colour at a threshold or place the labels outside.

**Do not encode the stages in colour alone.** If the palette distinguishes stages, the order and the labels should carry that too — the sequence is the meaning, and a reader who cannot separate two hues should still be able to read the process.

**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. For a funnel, include the step-to-step rates in that table if you can — the rates are the part a sighted reader infers from the shape, so a text version without them is missing the argument.

## Export and handoff

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:

- **Code** writes a working component for React, Vue 3, Angular, Svelte or vanilla JavaScript, listing the library’s own npm packages at the same major version the plugin rendered with.
- **Config** gives you the library’s options object on its own — and for a funnel that object carries the sort order and the geometry, which are the settings most likely to be lost in translation.
- **Tokens** exports the colours and typography as CSS, SCSS, Tailwind, W3C design tokens or JSON.

The whole of that, including the accessibility exports and the embed generator, is in [From Figma to code](https://systergon.com/blog/figma-charts-export-react-vue-svelte-angular-design-tokens).

## Common questions

### When should I use a funnel instead of a bar chart?

When the stages are a real sequence and each one is a subset of the one before. That is the only thing a funnel does that a bar chart cannot: it asserts progression and loss. If your rows could be reordered without changing the meaning, they are categories, and a sorted bar chart is more accurate and easier to read.

### Why are my funnel stages in the wrong order?

Because of sorting. ECharts funnels take a `sort` option and the basic example ships with `sort: 'descending'`, which re-orders the bands by value rather than drawing your process order. You will only notice when a stage rises — which is precisely when the chart had something to tell you. Set it to `'none'` whenever the order carries meaning.

### What is the difference between a funnel and a pyramid chart?

Orientation and therefore meaning. A funnel is widest at the top and narrows as people drop out; a pyramid is widest at the bottom and reads as a foundation with layers above it. Highcharts has three in this category — a standard pyramid, a 3D one and a column pyramid — and ApexCharts ships one as well, built as a bar chart with `isFunnel` and filed under Bar.

### Which libraries can draw a funnel?

Four of the five, but only three have a Funnel category: Highcharts (5 examples, including the pyramids and the 3D variants), ECharts (4, with the most geometry control) and Nivo (1). **ApexCharts draws funnels too** — as a horizontal bar chart with `isFunnel: true` — but files its two examples under **Bar**. **Google Charts has no funnel at all**; there, use a sorted horizontal bar chart, which is often the better answer regardless.

### How many stages should a funnel have?

Three to seven. Below three there is no shape to read and a couple of numbers would do. Above seven the bands get too shallow to label and the drops between them become too small to see — group the tail stages, or split the process into two charts.

### Should the stages always decrease?

In a true funnel they will, because each stage is a subset of the last. If yours increases somewhere, either the stages are not nested — the most likely explanation — or the process genuinely allows re-entry, in which case say so in an annotation, or use a Sankey diagram that can show flow splitting and rejoining.

### Can I compare two funnels in one chart?

Yes — ECharts ships a four-funnel comparison and a mirrored layout where funnels face each other via `funnelAlign`. Make sure every funnel shares one width scale, or the comparison shows only shape and hides the difference in volume, which is usually the point.

### Does the chart stay editable in Figma?

Insert as **SVG** and every band is a real vector shape with real text, which makes a funnel one of the easiest charts to annotate on the canvas — a callout on the worst-converting step, or a bracket across two stages. 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.

## Where to start

Open the plugin, filter to Funnel, and before you touch the styling, write the step-to-step percentages next to your stages. If the taper and the percentages tell the same story, you have the right chart and the rest is craft. If the percentages surprise you — if the worst step is not the narrow one at the bottom — then you have just found the thing the chart is for, and it deserves a label rather than a gradient.

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