jQuery Pyramid Charts & Graphs

Download jQuery Chart Samples

jQuery Pyramid Charts are used to show data that are hierarchical in nature, indicating a progressive order. It is also used to show proportion of the total. Given example shows simple jQuery 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 options = {
	animationEnabled: true,
	exportEnabled: true,
	title: {
		text: "Product Manufacturing Expenses"
	},
	data: [{
		type: "pyramid",
		indexLabelFontSize: 18,
		showInLegend: true,
		legendText: "{indexLabel}",
		toolTipContent: "<b>{indexLabel}:</b> {y}%",
		dataPoints: [
			{ y: 30, indexLabel: "Research and Design" },
			{ y: 30, indexLabel: "Manufacturing" },
			{ y: 15, indexLabel: "Marketing" },
			{ y: 13, indexLabel: "Shipping" },
			{ y: 12, indexLabel: "Retail" }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

valueRepresents allow you to control whether the values of dataPoints are proportional to section’s area or height. Other commonly used customization options are indexLabelPlacement, indexLabelFontColor, showInLegend etc.

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