The funnel plugin for Chart.js
npm install chartjs-plugin-funnel[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]
bash
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:
`js
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
`js
{
callbacks: {
title: function (tooltipItem, data) {
return '';
},
label: function (tooltipItem, data) {
return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
}
}
}
``