chartjs-plugin-funnel

    1.1.5 • Public • Published

    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.

    Install

    npm i chartjs-plugin-funnel

    DownloadsWeekly Downloads

    1,145

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    963 kB

    Total Files

    24

    Last publish

    Collaborators

    • yetiforce