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