JavaScript Pie Charts & Graphs

Download JavaScript Chart Samples

JavaScript Pie Chart divides a circle into multiple slices that are proportional to their contribution towards the total sum. Pie charts are useful in comparing the share or proportion of various items. Pie Charts are interactive, responsive, supports animation, exporting as image & can easily be integrated with popular JavaScript frameworks. Given example shows JavaScript Pie Chart along with HTML source code that you can edit in-browser or save to run it locally.

Try Editing The Code

window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
		text: "Desktop Search Engine Market Share - 2016"
	},
	data: [{
		type: "pie",
		startAngle: 240,
		yValueFormatString: "##0.00\"%\"",
		indexLabel: "{label} {y}",
		dataPoints: [
			{y: 79.45, label: "Google"},
			{y: 7.31, label: "Bing"},
			{y: 7.06, label: "Baidu"},
			{y: 4.91, label: "Yahoo"},
			{y: 1.26, label: "Others"}
		]
	}]
});
chart.render();

}

Chart Customizations

You can customize the color of individual slices, or change angle of pie using startAngle. Some other customizations include radius, fillOpacity, indexLabelPlacement, etc.