JavaScript Pareto Charts with Index / Data Label

Download JavaScript Chart Samples

Index / Data labels are used to show some additional information about data points. You can easily add and customize index / data labels to pareto chart. Given example shows Pareto Chart with data / index labels which also contains source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	title:{
		text: "Customer Complaints"
	},
	axisY: {
		title: "Number of Reviews",
		lineColor: "#4F81BC",
		tickColor: "#4F81BC",
		labelFontColor: "#4F81BC",
		gridThickness: 0
	},
	axisY2: {
		title: "Percent",
		suffix: "%",
		gridThickness: 0,
		lineColor: "#C0504E",
		tickColor: "#C0504E",
		labelFontColor: "#C0504E"
	},
	data: [{
		type: "column",
		dataPoints: [
			{ label: "Parking", y: 3050 },
			{ label: "Rude Sales Rep.", y: 1100 },
			{ label: "Poor Lighting", y: 850 },
			{ label: "Confusing Layout", y: 480 },
			{ label: "Limited Size", y: 350 },
			{ label: "Faded Clothes", y: 180 },
			{ label: "Shrank Clothes", y: 120 }
		]
	}]
});
chart.render();
createPareto();

function createPareto(){
	var dps = [];
	var yValue, yTotal = 0, yPercent = 0;

	for(var i = 0; i < chart.data[0].dataPoints.length; i++)
		yTotal += chart.data[0].dataPoints[i].y;

	for(var i = 0; i < chart.data[0].dataPoints.length; i++) {
		yValue = chart.data[0].dataPoints[i].y;
		yPercent += (yValue / yTotal * 100);
		dps.push({label: chart.data[0].dataPoints[i].label, y: yPercent });
	}
	chart.addTo("data", {type:"line", axisYType: "secondary", yValueFormatString: "0.##\"%\"", indexLabel: "{y}", indexLabelFontColor: "#C24642", dataPoints: dps});
	chart.axisY[0].set("maximum", yTotal, false);
	chart.axisY2[0].set("maximum", 105, false );
	chart.axisY2[0].set("interval", 25 );
}

}

Chart Customizations

You can change the color of line using lineColor property. Other common customizations include indexLabel, indexLabelFontColor, indexLabelFontSize, etc.