JavaScript Reversed / Inverted Funnel Charts

Download JavaScript Chart Samples

You can rotate a Funnel Chart upside-down by setting reversed property to true. You can also control height and width of Funnel's Neck. Like Pie Chart, Legends are shown for all data points instead of data series. The given example shows an Inverted Funnel Chart along with source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title:{
		text: "Sales via Advertisement"
	},
	data: [{
		type: "funnel",
		reversed: true,
		showInLegend: true,
		legendText: "{label}",
		indexLabel: "{label} - {y}",
		toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>",
		indexLabelFontColor: "black",
		dataPoints: [
			{ y: 3500, label: "Impressions" },
			{ y: 2130, label: "Clicked" },
			{ y: 1950, label: "Free Downloads" },
			{ y: 500, label: "Purchase" },
			{ y: 300, label: "Renewal" }
		]
	}]
});
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

Funnel charts can be inverted by setting the reversed property available the data series level to true. Other commonly used customization options are showInLegend, exploded, explodeOnClick, click, etc.