Chart maker · Funnel Funnel chart maker
Paste the steps in order with how many people reached each one. The chart shows the conversion from the step before and from the first step, and a table lists the drop at each step.
- Paste from Excel, Sheets or CSV
- SVG, PNG and embed code
- Runs locally
Paste data, pick a chart
First column = categories (or the x-axis); every other column = one series. A first row with names is used as the header. For a Sankey diagram, paste source, target, value rows instead.
Tabs (copied from a spreadsheet), commas or semicolons. 1,200, 12%, $5.40 and −30 are all read as numbers.
Paste a table on the left to draw a chart.
Step conversion
| Step | Users | From previous | From first | Change |
|---|---|---|---|---|
| Viewed product | 2,400 | — | 100.0% | — |
| Added to cart | 1,248 | 52.0% | 52.0% | -1,152 |
| Started checkout | 674 | 54.0% | 28.1% | -574 |
| Paid | 508 | 75.4% | 21.2% | -166 |
Inline SVG embed code
Paste it straight into an HTML page, a CMS block that accepts HTML, or a Markdown file that allows HTML. It scales to its container and has a title for screen readers.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 286" width="680" height="286" font-family="Inter,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif" role="img" aria-label="Checkout funnel, last 30 days" style="display:block;max-width:100%;height:auto;margin:0 auto"><title>Checkout funnel, last 30 days</title><desc>Viewed product 2,400 → Added to cart 1,248 → Started checkout 674 → Paid 508</desc><rect width="680" height="286" fill="#ffffff"/><text x="16" y="28" font-size="16" font-weight="700" fill="#0b0f19">Checkout funnel, last 30 days</text><text x="664" y="54" text-anchor="end" font-size="11" fill="#6b7280">Overall</text><rect x="131.7" y="62" width="468.3" height="34" rx="4" fill="#2050f0"><title>Viewed product: 2,400 · 100.0%</title></rect><text x="119.7" y="83" text-anchor="end" font-size="12" fill="#0b0f19">Viewed product</text><text x="365.8" y="83" text-anchor="middle" font-size="12" font-weight="600" fill="#ffffff">2,400</text><text x="664" y="83" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">100.0%</text><rect x="244.1" y="120" width="243.5" height="34" rx="4" fill="#2050f0"><title>Added to cart: 1,248 · 52.0%</title></rect><text x="119.7" y="141" text-anchor="end" font-size="12" fill="#0b0f19">Added to cart</text><text x="365.8" y="141" text-anchor="middle" font-size="12" font-weight="600" fill="#ffffff">1,248</text><text x="664" y="141" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">52.0%</text><text x="365.8" y="112" text-anchor="middle" font-size="11" fill="#6b7280">↓ 52.0%</text><rect x="300.1" y="178" width="131.5" height="34" rx="4" fill="#2050f0"><title>Started checkout: 674 · 28.1%</title></rect><text x="119.7" y="199" text-anchor="end" font-size="12" fill="#0b0f19">Started checkout</text><text x="365.8" y="199" text-anchor="middle" font-size="12" font-weight="600" fill="#ffffff">674</text><text x="664" y="199" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">28.1%</text><text x="365.8" y="170" text-anchor="middle" font-size="11" fill="#6b7280">↓ 54.0%</text><rect x="316.3" y="236" width="99.1" height="34" rx="4" fill="#2050f0"><title>Paid: 508 · 21.2%</title></rect><text x="119.7" y="257" text-anchor="end" font-size="12" fill="#0b0f19">Paid</text><text x="365.8" y="257" text-anchor="middle" font-size="12" font-weight="600" fill="#ffffff">508</text><text x="664" y="257" text-anchor="end" font-size="12" font-weight="600" fill="#0b0f19">21.2%</text><text x="365.8" y="228" text-anchor="middle" font-size="11" fill="#6b7280">↓ 75.4%</text></svg>Version v1.0Updated Update history
What data suits a funnel chart
A funnel is for one ordered path where every step is a subset of the step before: the same people, fewer of them each time.
Ordered steps of one path
Visit → sign-up → activation → payment. The order is the data, so sorting is ignored.
Each step a subset
Only people who added to cart can check out. If a later step is bigger, you are mixing paths or counting sessions in one step and users in another; the tool flags it.
Two rates, not one
“From previous” finds the leaky step; “from first” is the overall conversion. In the sample only 52% of viewers add to cart, while 75% of those who start checkout pay.
Not for unrelated totals
Visits, sign-ups and orders from different periods or populations are just three numbers. Use a bar chart.
Step conversion = this step ÷ previous step. Overall = this step ÷ first step. The sample is the checkout funnel shown on the TapCub behavioural analytics page.
From spreadsheet to slide in four steps
The chart redraws as you type.
-
1
Copy the cells
Select the table in Excel, Google Sheets or Numbers — including the header row — and copy. Or paste CSV text.
-
2
Paste and pick a type
The first column becomes the categories; each other column becomes a series. Pick the chart type; the checks under the chart tell you if the data does not fit it.
-
3
Tidy it up
Add a title, choose a palette, sort bars largest first, switch bars to horizontal for long names, stack or group several columns.
-
4
Export
Download a PNG for slides and chat, an SVG for print and design tools, or copy the inline SVG to embed it in a web page.
The parsing rules
The tool guesses as little as possible and tells you when it had to.
- Separator: tabs if the text has any (that is what a spreadsheet copy gives you), otherwise whichever of comma, semicolon or vertical bar gives the most consistent columns. Quoted CSV cells are supported.
- Header: the first row is a header if any cell after the first column is not a number.
- Numbers: thousands separators, currency symbols, a trailing %, a leading minus or accounting brackets, full-width digits and 万 / 亿 / k suffixes are understood. Anything else is left empty and listed.
- Limits: 200 rows and 8 number columns. Pie charts keep the 7 largest slices and group the rest as “Other”.
| Chart | Columns | Example row |
|---|---|---|
| Bar / line | label, value, [value…] | Jan, 1240, 860 |
| Pie | label, value (positive) | Email, 860 |
| Funnel | step, count (in order) | Added to cart, 1248 |
| Sankey | source, target, value | Google, Pricing, 150 |
One table, three honest charts
The default data is five months of sign-ups from three channels. The same numbers answer different questions depending on the chart.
| Question | Chart | What it shows |
|---|---|---|
| Which channel brings the most? | Bar, grouped | Organic leads every month; paid is second. |
| Is the total growing? | Bar, stacked | Total rises from 2,410 in January to 3,220 in May. |
| Which channel is growing fastest? | Line | Referral grows 48% (310 → 460), organic 41%, paid 17%. |
| What share was referral in May? | Pie (May only) | 460 of 3,220 = 14.3%. |
Percent change = (May − January) ÷ January. Paste just the May column into a pie to check the share yourself.
Charts that mislead without lying
Every number can be right and the chart still gives the wrong impression.
Bars that don’t start at zero
A bar’s length is its value. Cut the axis at 900 and 950 looks twice as big as 925. This tool always starts bars at zero; lines may zoom in.
Pies with a total slice
A “Total” row pasted with the parts makes every slice half its real size. The tool warns when a row equals the sum of the others.
Two y-axes
With two scales, where the lines cross is decided by whoever set the axes. Use two charts, or index both series to 100.
Colour as the only label
About one man in twelve has some colour-vision deficiency. Every chart here also names its series in a legend or label.
Charts that stay up to date
A pasted chart is a snapshot. In TapCub the same charts are built from live events and refresh by themselves.
Dashboards
Pin charts from any report and share them with your team, or by read-only link.
Learn moreFunnels and paths
Step conversion, time between steps, and the real paths before and after any event.
Learn moreAsk in plain language
Type a question and get a chart with a one-line conclusion.
Learn moreChart maker questions
Still have a question?
Chat with the team behind TapCub — we usually reply within a few hours on business days.
How do I calculate funnel conversion?
Divide each step by the one before it for step conversion, and by the first step for overall conversion. The sample: 1,248 ÷ 2,400 = 52%, and 508 ÷ 2,400 = 21.2% overall.
Why is my funnel getting wider?
A step has more people than the step before it. Usually a step counts sessions while another counts users, or people can enter mid-funnel. Fix the definitions rather than the chart.
Funnel chart or bar chart?
A funnel when the steps are one path and the drop between them is the story; bars when you compare totals that aren’t nested.
Can I compare two funnels?
Draw one funnel per segment and compare the step rates, or use the funnel calculator, which highlights the biggest leak.
Update history
New features, fixes and data refreshes for this tool, newest first.
-
· v1.0
LaunchedFirst release.
Missing something or found an error? Tell us — requests that come up often go into the next update. All tool updates
Stop rebuilding the same chart every week
Connect your site or app once and the traffic, funnel and retention charts build themselves from live data.