Show Sidebar Hide Sidebar
Plotly.js

Funnel and Funnelarea Charts in JavaScript

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

var gd = document.getElementById('graphDiv');
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(gd, data, layout);
var gd = document.getElementById('graphDiv');

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(gd, data, layout);
var gd = document.getElementById('graphDiv');
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(gd, data, layout);
var gd = document.getElementById('graphDiv');
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(gd, data, layout);
var gd = document.getElementById('graphDiv');
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(gd, data, layout);

plotly.js runs on all SVG-compatible browsers