JavaScript Funnel Charts & Graphs

Download JavaScript Chart Samples

JavaScript Funnel Charts are used to represent multiple stages in a process. It consists of the higher part called head (or base) and the lower part referred to as neck. They are widely used in visualizing the sales process. CanvasJS Funnel Charts are responsive, interactive, cross-browser compatible, support animation & exporting as image. Given example shows JavaScript Funnel Chart along with 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,
	theme: "light2", //"light1", "dark1", "dark2"
	title:{
		text: "Sales Analysis - June 2016"
	},
	data: [{
		type: "funnel",
		indexLabelPlacement: "inside",
		indexLabelFontColor: "white",
		toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
		indexLabel: "{label} ({percentage}%)",
		dataPoints: [
			{ y: 1400, label: "Leads" },
			{ y: 1212, label: "Initial Communication" },
			{ y: 1080, label: "Customer Evaluation" },
			{ y: 665,  label: "Negotiation" },
			{ y: 578, label: "Order Received" },
			{ y: 549, label: "Payment" }
		]
	}]
});
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 neck of the Funnel Chart can be customized using neckWidth and neckHeight. Other common customizations include valueRepresents, color, indexLabelPlacement, fillOpacity, etc.