Beautiful SVG Funnel Chart JavaScript Library – FunnelGraph.js

Category: Chart & Graph , Javascript , Recommended | February 22, 2020
Author: greghub
Views Total: 784 views
Official Page: Go to website
Last Update: February 22, 2020
License: MIT


Beautiful SVG Funnel Chart JavaScript Library – FunnelGraph.js


The FunnelGraph.js JavaScript library helps you dynamically draws a beautiful, customizable, SVG-based, horizontal/vertical funnel chart to represent stages in a process.

How to use it:

Install & download.

$ npm install funnel-graph-js --save

Load the core stylesheet and theme CSS in the document.

<link rel="stylesheet" href="/dist/css/main.min.css">
<link rel="stylesheet" href="/dist/css/theme.min.css">

Create a placeholder for the funnel chart.

<div class="funnel">

Load the JavaScript at the bottom of the document.

<script src="/dist/js/funnel-graph.js"></script>

Define labels, values and colors in a data object.

const myData = {
  labels: ['Impressions', 'Add To Cart', 'Buy'],
  colors: ['#FFB178', '#FF3C8E'],
  values: [12000, 5700, 360]

Two-dimensional funnel graph is supported as well.

const myData = {
  labels: ['Impressions', 'Add To Cart', 'Buy'],
  subLabels: ['Direct', 'Social Media', 'Ads'],
  colors: [
    ['#FFB178', '#FF78B1', '#FF3C8E'],
    ['#A0BBFF', '#EC77FF'],
    ['#A0F9FF', '#7795FF']
  values: [
    [3500, 2500, 6500],
    [3300, 1400, 1000],
    [600, 200, 130]

Initialize the funnel graph.

var graph = new FunnelGraph({
    container: '.funnel',
    data: myData

Draw the funnel graph in the placeholder element.


Config the funnel graph with the following options.

var graph = new FunnelGraph({
    container: '.funnel',
    data: myData,
    direction: 'horizontal', // or 'vertical'
    gradientDirection: 'horizontal', // or 'vertical'
    displayPercent: true,
    width: 800,
    height: 800,
    subLabelValue: 'percent'

API methods.

// changes to vertical view

// changes to horizontal view

// toggles the direction

// changes to vertical graditent

// changes to horizontal gradient

// toggles the gradient direction

// updates the height/width

// updates data

// updates options


v1.4.2 (02/22/2020)

  • Fix gradient ID collision
  • Add ability to pass HTML DOM Element instance as container param

v1.4.1 (01/30/2020)

  • Fix dynamic data update

v1.4.0 (06/10/2019)

  • Add ability to handle data with all zero values
  • Allow decimals for values
  • Update packages

v1.3.9 (06/10/2019)

  • Improve IE compatibility

v1.3.8 (05/30/2019)

  • Fix bug with zero values

v1.3.7 (04/12/2019)

  • Add option to display sub-label raw value

v1.3.6 (03/07/2019)

  • Add method to create center line for shapes
  • Fixed theme issue

v1.3.4 (02/28/2019)

  • Update theme

You Might Be Interested In:

One thought on “Beautiful SVG Funnel Chart JavaScript Library – FunnelGraph.js

  1. Steve

    This is a great looking funnel. I’m trying to incorporate it into a dashboarding tool but the tool has the constraint that it cannot import external files. I have to upload all my JavaScript as a single file. Is there an easy way to create a single JS file that includes everything needed to use this?



Leave a Reply