2D Pies

All-app template, with interactive and animated 2D pies. Slice them up, or collapse the slices back, with single clicks. Show data labels, inside or outside, as values or percent. Show legend with series names. Each slice is a total of values for a single series, a country name in this case. <br />Exceptions: Microsoft Charts are static (no animation or interaction); FusionCharts shows no legend for pies/doughnuts, and always shows data labels outside.

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js" type="text/javascript"></script>
<div class="chart_cont">
    <div id="chart_div"></div>
</div>

JavaScript

$(function () {
   var options = {
      width: 400, height: 400,
      legend: {
      		cursor: "pointer",
         	itemclick: function (e) {
								console.log("legend click: " + e.dataPointIndex);
                console.log(e);
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
                e.chart.render();
          },
      },
      data: [{
      		type: "pie",
      		dataPoints: [
      				{ name: "US", showInLegend: true, y: 46 },
      				{ name: "France", showInLegend: true, y: 55 },
      				{ name: "UK", showInLegend: true, y: 18 }
          ]
			}]
   };
   var chart = new CanvasJS.Chart("chart_div", options);
   chart.render();
});