chartjs-funnel

The funnel plugin for Chart.js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
chartjs-funnel
33121.0.57 years ago8 years agoMinified + gzip package size for chartjs-funnel in KB

Readme

!NPM versionnpm-version-imagenpm-url !NPM downloadsnpm-downloads-imagenpm-url !MIT Licenselicense-imagelicense-url Build Status
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: ```bash npm install chartjs-funnel --save ```

Usage

alt tag 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. 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 ```js {
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.