JavaScript Pyramid Charts with Index / Data Labels placed Inside

Download JavaScript Chart Samples

Index / Data Labels provides additional information about the data point in the Graph. You can place index / data labels inside or outside of Pyramid. The given example shows Index Labels Placed Inside a Pyramid Chart. It also contains 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: "light2",
	title:{
		text: "Advertisement Risk Pyramid"
	},
	data: [{
		type: "pyramid",
		toolTipContent: "<b>{label}</b>: {y}%",
		indexLabelFontColor: "#5A5757",
		indexLabelFontSize: 16,
		indexLabel: "{label}({y}%)",
		indexLabelPlacement: "inside",
		dataPoints: [
			{ y: 15, label: "Pay Per Click Advertising" },
			{ y: 25, label: "Website Sponsorship" },
			{ y: 25, label: "Banner Advertising" },
			{ y: 40, label: "Interactive Advertising" },
			{ y: 60, label: "Traditional Media" }
		]
	}]
});
chart.render();

}

Chart Customizations

The placement of Index / Data Labels can be placed inside or outside by setting indexLabelPlacement property to either inside or outside. When index labels are placed outside, index labels are connected to the data points with a line. This line can be customized using the properties indexLabelLineColor, indexLabelLineThickness, etc.