Beautiful SVG Funnel Chart JavaScript Library – FunnelGraph.js

Preview:

Description:

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
$ 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">
</div>

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.

graph.draw();

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
graph.makeVertical();
// changes to horizontal view
graph.makeHorizontal();
// toggles the direction
graph.toggleDirection();
// changes to vertical graditent
graph.gradientMakeVertical();
// changes to horizontal gradient
graph.gradientMakeHorizontal();
// toggles the gradient direction
graph.gradientToggleDirection();
// updates the height/width
graph.updateHeight();
graph.updateWidth();
// updates data
graph.updateData({data});
// updates options
graph.update({options});

Changelog:

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