d3-funnel.js is javascript chart library based on d3.js. It can make us create svg based funnel charts easily for web applications.
How to create svg based funnel chart using d3-funnel.js?
1.Import d3.js in your html page first.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
2.Import d3-funnel.js file
<script src="path/to/d3-funnel.js"></script>
3.Create a DIV element to show the funnel chart
<div id="funnel"></div>
4.Prepare the data for funnel chart using an array
data = [ ["Applicants", 12000], ["Pre-screened", 4000], ["Interviewed", 2500], ["Hired", 1500] ];
5.Use html div id and funnel chart data to create a funnel chart
var chart = new D3Funnel("#funnel"); chart.draw(data);
You also can use some options to set the funnel chart.
var options = { chart: { width: 350, height: 400, bottomWidth: 1 / 3, bottomPinch: 0, inverted: false, horizontal: false, animate: 0, curve: { enabled: false, height: 20, shade: -0.4, }, totalCount: null, }, block: { dynamicHeight: false, dynamicSlope: false, barOverlay: false, fill: { scale: scaleOrdinal(schemeCategory10).domain(range(0, 10)), type: 'solid', }, minHeight: 0, highlight: false, }, label: { enabled: true, fontFamily: null, fontSize: '14px', fill: '#fff', format: '{l}: {f}', }, tooltip: { enabled: false, format: '{l}: {f}', }, events: { click: { block: null, }, }, }; chart.draw(data, options);