jQuery Pie Charts & Graphs

Download jQuery Chart Samples

jQuery Pie Chart divides a circle into multiple slices that are proportional to their contribution towards the total sum. Given example shows simple jQuery Pie 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 = {
	title: {
		text: "Website Traffic Source"
	},
	data: [{
			type: "pie",
			startAngle: 45,
			showInLegend: "true",
			legendText: "{label}",
			indexLabel: "{label} ({y})",
			yValueFormatString:"#,##0.#"%"",
			dataPoints: [
				{ label: "Organic", y: 36 },
				{ label: "Email Marketing", y: 31 },
				{ label: "Referrals", y: 7 },
				{ label: "Twitter", y: 7 },
				{ label: "Facebook", y: 6 },
				{ label: "Google", y: 10 },
				{ label: "Others", y: 3 }
			]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

The starting angle of pie can be changed using startAngle. Other frequently used customization options are radius, color, fillOpacity, indexLabelPlacement, etc.

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