JavaScript Funnel Charts with Custom Neck Height and Width

Download JavaScript Chart Samples

You can easily change the height and width of neck in Funnel Chart. Changing height and width of neck to zero in Funnel Graph would make it look like inverted Pyramid Chart. The Given example shows a Funnel Chart with Customized height and width of a Neck. It also contains the source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Recruitment Analysis - July 2016"
	},
	data: [{
		type: "funnel",
		indexLabel: "{label} - {y}",
		toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
		neckWidth: 20,
		neckHeight: 0,
		valueRepresents: "area",
		dataPoints: [
			{ y: 3871, label: "Applications" },
			{ y: 2496, label: "Screened" },
			{ y: 1398, label: "Qualified" },
			{ y: 1118, label: "Interviewed" },
			{ y: 201, label: "Offers Extended" },
			{ y: 151, label: "Filled" }
		]
	}]
});
calculatePercentage();
chart.render();

function calculatePercentage() {
	var dataPoint = chart.options.data[0].dataPoints;
	var total = dataPoint[0].y;
	for(var i = 0; i < dataPoint.length; i++) {
		if(i == 0) {
			chart.options.data[0].dataPoints[i].percentage = 100;
		} else {
			chart.options.data[0].dataPoints[i].percentage = ((dataPoint[i].y / total) * 100).toFixed(2);
		}
	}
}

}

Chart Customizations

The width, height of the lower part of the funnel chart, i.e. neck can be customized using neckHeight and neckWidth property available at data series level. You can also reverse the funnel by using the reversed property. Other frequently used customization options are legend, valueRepresents etc.