| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Wed, 15 Oct 2025 04:23:18 GMT
etag: W/"68e952e4-bd98"
expires: Wed, 15 Oct 2025 04:33:18 GMT
last-modified: Fri, 10 Oct 2025 18:39:32 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: 9a8dc3618cb2db1a5d99e8f28895b5c735197187
x-github-request-id: EBE4:31E56F:10F912:1461C0:68EF21B5
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210030-BOM
x-timer: S1760502198.472797,VS0,VE299
x-vercel-cache: MISS
x-vercel-id: bom1::xchfc-1760502198451-2461b074ca75
content-length: 10005
Funnel and funnelarea charts in JavaScript
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. Try Plotly Studio now.
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);