Home / Part to Whole / Funnel Chart
Funnel Chart in HTML, CSS and JavaScript
A funnel chart shows how many people make it through each step of a process, like visiting a shop, adding to cart and buying. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows shoppers moving from first visit to purchase in an online shop.
What is a funnel chart?
A funnel chart shows how many people make it through each step of a process, like visiting a shop, adding to cart and buying. Each step is a bar, and the bars get narrower as people drop out.
It shows where you lose the most people, which is where you should work first. The lost number between steps is often more useful than the step totals themselves.
At a glance
- Best for
- Steps in a process where people drop out
- Data you need
- A name and a count for each step, in order
- Skip it when
- Steps that are not in a fixed order.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a funnel chart
- Online shop checkout steps
- Sign up and onboarding flows
- Sales pipelines from lead to deal
- Job applications from applied to hired
When to pick another chart
- Horizontal Bar Chart: you want exact comparisons without the funnel shape
- Sankey Diagram: people can take different paths between steps
What you get in this template
- Centered bars that shrink with each step
- Soft shapes between bars that show the flow
- The number and share lost between every step
- A switch between share of all visitors and step to step
- Bars grow out from the middle on load
- Keyboard support and a full data table
How the code works
Here is a short version of the idea behind this funnel chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const steps = [['Visited', 48200], ['Viewed a product', 21700], ['Added to cart', 7900], ['Bought', 2600]];
const cx = 320, maxW = 400, rowH = 60;
steps.forEach(([name, count], i) => {
const w = count / steps[0][1] * maxW;
drawRect(cx - w / 2, i * rowH, w, 40, '#5a3fd1');
drawText(cx - maxW / 2 - 10, i * rowH + 25, name, 'end');
drawText(cx + maxW / 2 + 10, i * rowH + 25, (count / steps[0][1] * 100).toFixed(1) + '%');
});The example uses four tiny helpers that create SVG shapes. Put them above the code and it runs as is.
const svg = document.querySelector('svg');
function make(tag, attrs) {
const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
svg.appendChild(n);
return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
t.textContent = str;
return t;
}How to add it to your website
- Download the file. Click Download HTML file above. You get one file called funnel-chart.html with everything inside.
- Change the data. Open the file in any code editor and find the DATA list near the bottom. Replace the names and numbers with your own.
- Change the colors and text. Colors are at the top of the style tag. The title, subtitle and main point are plain HTML near the top of the body.
- Put it online. Upload the file to any host, such as GitHub Pages, Netlify or your own server, or paste it into your site. There is no build step.
Questions people ask
What is a funnel chart used for?
It shows how many people pass through each step of a process and where they drop out. It is most common for sales, sign ups and checkout flows.
How do I calculate conversion in a funnel?
Divide the count at a step by the count at the first step for overall conversion, or by the step before it for step to step conversion. This template shows both.
Which step should I fix first?
Start with the step that loses the largest share of people. In the example, most shoppers who view a product never add it to the cart.
Should a funnel chart have a funnel shape?
The shape helps people recognize it, but the bar widths must match the numbers. Avoid funnels drawn as fixed cones, because they hide the real drop off.
More part to whole
021. Pie Chart
Example: how customers paid at a cafe
022. Donut Chart
Example: workouts logged by members of a fitness app
023. Semi Donut Chart
Example: a fundraising appeal and the money still needed
024. Treemap
Example: bookshop sales by section and genre
025. Sunburst Chart
Example: where a city sends its household waste
026. Waffle Chart
Example: how 100 new customers found a furniture shop
027. Marimekko Chart
Example: e-bike market share by region and brand
029. Icicle Chart
Example: what is filling up a laptop drive