Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including chartjs-plugin-funnel with all npm packages installed. Try it out:

var chartjsPluginFunnel = require("chartjs-plugin-funnel")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

chartjs-plugin-funnel v1.1.5

The funnel plugin for Chart.js

NPM version NPM downloads MIT License Build Status

chartjs-plugin-funnel

The funnel plugin for Chart.js > 2.7

Installation

To download a zip, go to the chartjs-plugin-funnel on Github

To install via npm / bower:

npm install chartjs-plugin-funnel --save

Preview

chartjs-plugin-funnel

chartjs-plugin-funnel

chartjs-plugin-funnel

chartjs-plugin-funnel

chartjs-plugin-funnel

Usage

To configure the funnel plugin, you can simply set chart type to funnel.

Simple example:

var config = {
    type: 'funnel',
    data: {
        datasets: [{
            data: [30, 60, 90],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }],
        labels: [
            "Red",
            "Blue",
            "Yellow"
        ]
    }
}

Funnel chart support upside-down drawing or against left or right side drawing.

This plugin works with datalabels plugin.

You can find documentation for Chart.js at www.chartjs.org/docs.

Options

sort

Reverse or not, you can set 'desc' to draw an upside-down funnel.

default is 'asc'.

gap

The gap between to trapezium in our funnel chart. The unit is px.

default is 2

keep

Draw element against left or right side.

default is 'auto'.

topWidth

The top-width of funnel chart, defualt is 0

bottomWidth

The bottom-width of funnel chart, default use the width of canvas.

tooltips

The tooltips option is a special option for funnel chart, you should be careful if you want to rewrite the option.

The default option is

{
   callbacks: {
        title: function (tooltipItem, data) {
            return '';
        },
        label: function (tooltipItem, data) {
            return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        }
    }
}

License

Chart.Funnel.js is available under the MIT license.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free