Creating Funnel Charts Using SVG and D3.js – D3 Funnel

Category: Chart & Graph , Javascript | February 26, 2022
Views Total:1,976 views
Official Page:Go to website
Last Update:February 26, 2022


Creating Funnel Charts Using SVG and D3.js – D3 Funnel


D3 Funnel is a JavaScript library for drawing customizable SVG based funnel charts using D3.js library.

Basic Usage:

Load the necessary d3.js from a CDN.

<script src=""></script>

Load the D3 Funnel JS library in the document.

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

Create a DIV element that will serve as the container for the funnel chart.

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

Add an array of data to the funnel chart.

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

The JavaScript to draw a default funnel chart within the ‘funnel’ DIV element.

var chart = new D3Funnel("#funnel");

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


v2.1.0 (02/26/2022)

  • Add TypeScript index file

v2.0.1 (06/04/2021)

  • Fix an issue with tooltip alignment in newer versions of Chrome
  • Upgrade to using D3 v6 (changes to, d))

v2.0.0 (01/16/2021)

  • Fix animation errors in D3 v6

v1.2.2 (01/27/2019)

  • Significantly reduce package size to around 27% of its original size

v1.2.1 (10/14/2018)

  • Fix issue where dist/d3-funnel.js was being minified alongside dist/d3-funnel.min.js

v1.2.0 (06/26/2018)

  • Add official support for D3.js v5

You Might Be Interested In:

One thought on “Creating Funnel Charts Using SVG and D3.js – D3 Funnel

  1. Steve Cavanagh

    Tracked it down. Browser thinks jquery file is not there even though browsing to it works ok. Copying the file locally works.


Leave a Reply