A JavaScript Library for Displaying Funnel Charts Using D3.js

d3-funnel is an expandable, open-source JavaScript library for displaying funnel diagrams/Charts using the D3.js. library. D3-funnel focuses on providing practical and visually appealing funnels through a variety of customization options.

funnel chart with multiple measures, funnel chart template download, funnel chart, how to add funnel chart, when to use funnel chart, funnel chart js

How to make use of it:

Load the mandatory d3.js from a CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>

Load the D3 Funnel JS library within the doc.

<script src="path/to/d3-funnel.js"></script>

Create a DIV aspect that can function as the container for the funnel chart.

<div id="funnel"></div>

Add an array of information to the funnel chart.

data = [
  ["Applicants",   12000],
  ["Pre-screened", 4000],
  ["Interviewed",  2500],
  ["Hired",        1500]
];

The JavaScript to draw a default funnel chart inside the ‘funnel’ DIV aspect.

var chart = new D3Funnel("#funnel");
chart.draw(data);

Available choices with default values.

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

Creating Funnel Charts Using SVG, d3-funnel Plugin/Github