JavaScript Pyramid Charts with Areas Proportional to Values

Download JavaScript Chart Samples

The values of data points can be represented as a portion of total height or a portion of the total Area in Funnel Chart. You can also invert / revert the Pyramid Graph upside-down. Given example shows a Pyramid Chart with Area / Section Divided Proportional to the values. It also contains 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: "Product Manufacturing Expenses"
	},
	data: [{
		type: "pyramid",
		indexLabelFontSize: 18,
		valueRepresents: "area",
		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" }
		]
	}]
});
chart.render();

}

Chart Customizations

You can represent the value of the data point by using area or height by using the valueRepresents property available at the data series level. Other customization options are indexLabelPlacement, IndexLabelFontColor, showInLegend etc.