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:

1npm install chartjs-plugin-funnel --save

Preview

Usage

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

Simple example:

1var config = {
2    type: 'funnel',
3    data: {
4		datasets: [{
5			data: [30, 60, 90],
6			backgroundColor: [
7				"#FF6384",
8				"#36A2EB",
9				"#FFCE56"
10			],
11			hoverBackgroundColor: [
12				"#FF6384",
13				"#36A2EB",
14				"#FFCE56"
15			]
16		}],
17		labels: [
18			"Red",
19			"Blue",
20			"Yellow"
21		]
22	}
23}

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

1{
2   callbacks: {
3		title: function (tooltipItem, data) {
4			return '';
5		},
6		label: function (tooltipItem, data) {
7			return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
8		}
9	}
10}

License

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