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.

Basic Funnel Plot

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

Setting Marker Size and Color

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

Stacked Funnel

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

Funnelarea Plot

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

Multi Funnelarea

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