FunnelGraph.js

A two-dimensional funnel graph allows you to visualize sub-segments within each main stage. You provide subLabels for the breakdown and nested arrays in values and colors to match the sub-labels.

In a 2D graph, each segment can have its own unique color or gradient. If a gradient is used, the global gradientDirection option applies to all segments.

data: {
    labels: ['Impressions', 'Add To Cart', 'Buy'],
    subLabels: ['Direct', 'Social Media', 'Ads'],
    colors: [
        ['#FFB178', '#FF78B1', '#FF3C8E'],
        'red',
        ['blue']
    ],
    values: [
        [2000, 4000, 6000],
        [3000, 1000, 1700],
        [200, 30, 130]
    ]
}

There are three ways to define data:

1. Simple Array: Pass an array of numbers. This creates a graph without titles. data: [12000, 5700, 360]

2. Explicit Object: Pass an object containing labels, values, and optionally colors. This is the most explicit way.

   data: {
       labels: ['Impressions', 'Add To Cart', 'Buy'],
       colors: ['orange', 'red'],
       values: [12000, 5700, 360]
   }

3. Two-dimensional Data: Break down segments into sub-categories using subLabels and nested arrays for colors and values.

data: {
    labels: ['Impressions', 'Add To Cart', 'Buy'],
    subLabels: ['Direct', 'Social Media', 'Ads'],
    colors: [
        ['#FFB178', '#FF78B1', '#FF3C8E'],
        'red',
        ['blue']
    ],
    values: [
        [2000, 4000, 6000],
        [3000, 1000, 1700],
        [200, 30, 130]
    ]
}

You can install FunnelGraph.js via NPM, use a CDN, or download the files directly.

NPM

npm i funnel-graph-js

CDN

Include the following in your HTML:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js@1.3.9/dist/css/main.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js@1.3.9/dist/css/theme.min.css">

<script src="https://unpkg.com/funnel-graph-js@1.3.9/dist/js/funnel-graph.min.js"></script>

Download

Download the repository ZIP and include funnel-graph.js (or .min.js) and main.css (or .min.css). It is highly recommended to also include theme.min.css to ensure labels and legends are styled correctly.

To create a funnel chart, instantiate the FunnelGraph class with a configuration object and call the .draw() method. You must provide a container selector and a data object.

By default, the library calculates percentages automatically, treating the largest number as 100% and calculating others as a fraction of that maximum.

var graph = new FunnelGraph({
    container: '.funnel',
    gradientDirection: 'horizontal',
    data: {
        labels: ['Impressions', 'Add To Cart', 'Buy'],
        values: [12000, 5700, 360]
    },
    displayPercent: true,
    direction: 'horizontal'
});

graph.draw();

The package exports a default instance of the FunnelGraph class. You can import it using standard CommonJS require syntax to begin creating funnel graphs.

const FunnelGraph = require('funnel-graph-js');

Use the .update(options) method to modify an existing graph without re-instantiating it. This method allows for efficient updates to dimensions, direction, gradient direction, or the underlying data.

Supported update keys:

• displayPercent: Toggles percentage visibility.
• height / width: Updates graph dimensions.
• gradientDirection: Changes gradient orientation.
• direction: Changes graph orientation (vertical/horizontal).
• data: Updates the entire dataset (labels, values, subLabels, etc.).

// Update only the width and direction
graph.update({
    width: 800,
    direction: 'vertical'
});

// Update the data entirely
graph.update({
    data: {
        labels: ['New Step 1', 'New Step 2'],
        values: [10, 5]
    }
});

You can programmatically change the orientation or gradient direction of a rendered graph using these methods:

Orientation:

• makeVertical(): Sets direction to vertical.
• makeHorizontal(): Sets direction to horizontal.
• toggleDirection(): Switches between vertical and horizontal.

Gradients:

• gradientMakeVertical(): Sets gradient direction to vertical.
• gradientMakeHorizontal(): Sets gradient direction to horizontal.
• gradientToggleDirection(): Switches between vertical and horizontal gradients.