jQuery Funnel Charts with Custom Neck Height and Width

Download jQuery Chart Samples

Customizing the neck in Funnel Chart is really easy. You can change height and width of neck to zero in Funnel Graph would make it look like an 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 options = {
	animationEnabled: true,
	title: {
		text: "Recruitment Analysis - April 2017"
	},
	data: [{
		type: "funnel",
		indexLabel: "{label} - {y}",
		toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
		neckWidth: 50,
		neckHeight: 0,
		valueRepresents: "area",
		dataPoints: [
			{ y: 4271, label: "Applications" },
			{ y: 2596, label: "Screened" },
			{ y: 1448, label: "Qualified" },
			{ y: 1243, label: "Interviewed" },
			{ y: 241, label: "Offers Extended" },
			{ y: 207, label: "Filled" }
		]
	}]
};
calculatePercentage();
$("#chartContainer").CanvasJSChart(options);

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

}

Chart Customizations

Funnel chart can be customized using neckHeight & neckWidth properties. You can also reverse the funnel using reversed property. Some other commonly used customization options are valueRepresents, legend, etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial