JavaScript Pyramid Charts & Graphs

Download JavaScript Chart Samples

JavaScript Pyramid Charts are used to show data that are hierarchical in nature, indicating a progressive order. Pyramid graphs in a way are reversed funnel charts with no neck, and are similarly used to show proportion of the total. CanvasJS Pyramid Charts are interactive, responsive, cross-browser compatible, support animation & exporting to images. Given example shows a JavaScript Pyramid Chart along with HTML 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,
	exportEnabled: true,
	theme: "light1",
	title:{
		text: "Software Sales Conversion"
	},
	data: [{
		type: "pyramid",
		yValueFormatString: "#\"%\"",
		indexLabelFontColor: "black",
		indexLabelFontSize: 16,
		indexLabel: "{label} - {y}",
		//reversed: true, // Reverses the pyramid
		dataPoints: [
			{ y: 100, label: "Website Visit" },
			{ y: 65, label: "Download Page Visit" },
			{ y: 45, label: "Downloaded" },
			{ y: 32, label: "Interested To Buy" },
			{ y: 5, label: "Purchased" }
		]
	}]
});
chart.render();

}

Chart Customizations

The Data / Index Labels in Pyramid Charts can be placed inside by setting indexLabelPlacement to "inside". You can also reverse the chart using reversed property. Some other customizations include valueRepresents, exploded, color, etc.