Funnel and Funnelarea Charts in JavaScript

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

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

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