Package Exports

funnel-chart-js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (funnel-chart-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Chart.Funnel.js

The funnel plugin for Chart.js > 2.0

Installation

To download a zip, go to the Chart.Funnel.js on Github

To install via npm / bower:

npm install chartjs-funnel --save

Usage

alt tag 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.

Please see example folder for more information

alt tag alt tag

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.