JavaScript Pareto Charts & Graphs

Download JavaScript Chart Samples

Pareto Chart is a combination of Column & Line graph. The columns are placed in descending order of significance and the Line represents the cumulative total. It is used to highlight most significant situations. These Charts are interactive, responsive and support animation & exporting to images. Given example shows JavaScript Pareto Chart along with 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", {
	title:{
		text: "Popular Fast Food Chains"
	},
	axisY: {
		title: "Number of Locations",
		lineColor: "#4F81BC",
		tickColor: "#4F81BC",
		labelFontColor: "#4F81BC"
	},
	axisY2: {
		title: "Percent",
		suffix: "%",
		lineColor: "#C0504E",
		tickColor: "#C0504E",
		labelFontColor: "#C0504E"
	},
	data: [{
		type: "column",
		dataPoints: [
			{ label: "Subways", y: 44853 },
			{ label: "McDonald", y: 36525 },
			{ label: "Starbucks", y: 23768 },
			{ label: "KFC", y: 19420 },
			{ label: "Pizza Hut", y: 13528 },
			{ label: "Dunkin Donuts", y: 11906 }
		]
	}]
});
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", yValueFormatString: "0.##\"%\"", dataPoints: dps});
	chart.data[1].set("axisYType", "secondary", false);
	chart.axisY[0].set("maximum", yTotal);
	chart.axisY2[0].set("maximum", 100);
}

}

Chart Customizations

You can change the color of Column or Line to make it visually distinctive. Some other common customizations include dataPointWidth, markerType, markerColor etc.