Funnel and Funnelarea Charts in JavaScript

How to make a D3.js-based funnel chart in javascript.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

var gd = document.getElementById('myDiv');
var data = [{type: 'funnel', y: ["Website visit", "Downloads", "Potential customers", "Invoice sent", "Closed delas"], x: [13873, 10533, 5443, 2703, 908], hoverinfo: 'x+percent previous+percent initial'}];

var layout = {margin: {l: 150}, width:600, height: 500}

Plotly.newPlot('myDiv', data, layout);
Click to copy
13.873k10.533k54432703908Closed delasInvoice sentPotential customersDownloadsWebsite visit
var gd = document.getElementById('myDiv');

var data = [{type: 'funnel',
             y: ["Sales person A", "Sales person B", "Sales person C", "Sales person D", "Sales person E"],
             x: [1200, 909.4, 600.6, 300, 80], textposition: "inside", textinfo: "value+percent initial",
             hoverinfo: 'percent total+x', opacity: 0.65, marker: {color: ["59D4E8", "DDB6C6", "A696C8", "67EACA", "94D2E6"],
             line: {"width": [4, 2, 2, 3, 1, 1], color: ["3E4E88", "606470", "3E4E88", "606470", "3E4E88"]}},
             connector: {line: {color: "royalblue", dash: "dot", width: 3}}}];

var layout = {margin: {l: 100}, width: 600, height: 500}

Plotly.newPlot('myDiv', data, layout);
Click to copy
1200100%909.476%600.650%30025%807%Sales person ESales person DSales person CSales person BSales person A
var gd = document.getElementById('myDiv');
var data = [{type: 'funnel', name: 'Montreal',
  y: ["Website visit", "Downloads", "Potential customers", "Requested price"],
  x: [120, 60, 30, 20],
  textinfo: "value+percent initial"},
  {
     type: 'funnel',name: 'Toronto',
    y: ["Website visit", "Downloads", "Potential customers", "Requested price", "invoice sent"],
    x: [100, 60, 40, 30, 20], textposition: "inside", textinfo: "value+percent previous"},
  {
    type: 'funnel',name: 'Vancouver',
    y: ["Website visit", "Downloads", "Potential customers", "Requested price", "invoice sent", "closed deals"],
    x: [90, 70, 50, 30, 10, 5], textposition: "outside", textinfo: "value+percent total"}];

var layout = {margin: {l: 130, r: 0}, width: 600, funnelmode: "stack", showlegend: 'true'}

Plotly.newPlot('myDiv', data, layout);
Click to copy
120100%6050%3025%2017%100100%6060%4067%3075%2067%9035%7027%5020%3012%104%52%closed dealsinvoice sentRequested pricePotential customersDownloadsWebsite visit
MontrealTorontoVancouver
var gd = document.getElementById('myDiv');
var data = [{type: 'funnelarea', values: [5, 4, 3, 2, 1], text: ["The 1st", "The 2nd", "The 3rd", "The 4th", "The 5th"],
      marker: {colors: ["59D4E8", "DDB6C6", "A696C8", "67EACA", "94D2E6"],
                line: {color: ["3E4E88", "606470", "3E4E88", "606470", "3E4E88"], width: [2, 1, 5, 0, 3]}},
      textfont: {family: "Old Standard TT", size: 13, color: "black"}, opacity: 0.65}];

var layout = {margin: {l: 200 , r: 200}, funnelmode: "stack", showlegend: 'True'}

Plotly.newPlot('myDiv', data, layout);
Click to copy
The 1st33.3%The 2nd26.7%The 3rd20%The 4th13.3%The 5th6.67%
01234
var gd = document.getElementById('myDiv');
var data = [{type: 'funnelarea', scalegroup: "first", values: [500, 450, 340, 230, 220, 110],
    textinfo: "value", title: {position: "top center", text: "Sales for Sale Person A in U.S."},
    domain: {x: [0, 0.5], y: [0, 0.5]}},
{
    type: 'funnelarea', scalegroup: "first", values: [600, 500, 400, 300, 200, 100], textinfo: "value",
    title: {position: "top center", text: "Sales of Sale Person B in Canada"},
    domain: {x: [0, 0.5], y: [0.55, 1]}},
{
    type:'funnelarea', scalegroup: "second", values: [510, 480, 440, 330, 220, 100], textinfo: "value",
    title: {position: "top left", text: "Sales of Sale Person A in Canada"},
    domain: {x: [0.55, 1], y: [0, 0.5]}},
{
  type: 'funnelarea', scalegroup: "second", values: [360, 250, 240, 130, 120, 60],
  textinfo: "value", title: {position: "top left", text: "Sales of Sale Person B in U.S."},
  domain: {x: [0.55, 1], y: [0.55, 1]}}];

var layout = {width: 600,shapes: [
            {x0: 0, x1: 0.5, y0: 0, y1: 0.5},
            {x0: 0, x1: 0.5, y0: 0.55, y1: 1},
            {x0: 0.55, x1: 1, y0: 0, y1: 0.5},
            {x0: 0.55, x1: 1, y0: 0.55, y1: 1}]}

Plotly.newPlot('myDiv', data, layout);
Click to copy
500450340230220110Sales for Sale Person A in U.S.600500400300200100Sales of Sale Person B in Canada510480440330220100Sales of Sale Person A in Canada36025024013012060Sales of Sale Person B in U.S.
012345