charts/canvas/examples/06-doughnut-chart/doughnut-chart-with-index-label.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 \r
   4 <head>\r
   5         <script type="text/javascript">\r
   6                 window.onload = function () {\r
   7                         var chart = new CanvasJS.Chart("chartContainer", {\r
   8                                 title: {\r
   9                                         text: "Mobile / Tablet OS Market Share, Jun 2015"\r
  10                                 },\r
  11                                 animationEnabled: true,\r
  12                                 theme: "theme2",\r
  13                                 data: [\r
  14                                 {\r
  15                                         type: "doughnut",\r
  16                                         indexLabelFontFamily: "Garamond",\r
  17                                         indexLabelFontSize: 20,\r
  18                                         startAngle: 0,\r
  19                                         indexLabelFontColor: "dimgrey",\r
  20                                         indexLabelLineColor: "darkgrey",\r
  21                                         toolTipContent: "{y} %",\r
  22 \r
  23                                         dataPoints: [\r
  24                                         { y: 51.04, indexLabel: "Android {y}%" },\r
  25                                         { y: 40.83, indexLabel: "iOS {y}%" },\r
  26                                         { y: 3.20, indexLabel: "Java ME {y}%" },\r
  27                                         { y: 1.11, indexLabel: "BlackBerry {y}%" },\r
  28                                         { y: 2.29, indexLabel: "Windows {y}%" },\r
  29                                         { y: 1.53, indexLabel: "Others {y}%" }\r
  30 \r
  31                                         ]\r
  32                                 }\r
  33                                 ]\r
  34                         });\r
  35 \r
  36                         chart.render();\r
  37                 }\r
  38         </script>\r
  39         <script src="../../canvasjs.min.js"></script>\r
  40         <title>CanvasJS Example</title>\r
  41 </head>\r
  42 <body>\r
  43         <div id="chartContainer" style="height: 400px; width: 100%;">\r
  44         </div>\r
  45 </body>\r
  46 </html>\r