Pie Chart divides a circle into multiple slices that are proportional to their contribution towards the total sum. Pie chart is useful in comparing the share or proportion of various items. CanvasJS Pie Charts are interactive, responsive, cross-browser compatible, supports animation & exporting as image. Given example shows simple Pie Chart along with HTML / JavaScript source code that you can edit in-browser or save to run it locally.
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();
}
You can customize the color of individual slices, or change angle of pie using startAngle. Some other customizations include radius, fillOpacity, indexLabelPlacement, etc.