Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

by daniel silva

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Desktop Search Engine Market Share, Dec-2012"
      },
      legend:{
        verticalAlign: "center",
        horizontalAlign: "left",
        fontSize: 20,
        fontFamily: "Helvetica"        
      },
      theme: "theme2",
      data: [
      {        
       type: "pie",       
       indexLabelFontFamily: "Garamond",       
       indexLabelFontSize: 20,
       startAngle:0,      
       showInLegend: false,
       toolTipContent:"{label}",
       dataPoints: [
       {  y: 10, legendText:"Google", label: "g 83.3%" },
       {  y: 5, legendText:"Yahoo!", label: "y 8.16%" },
       {  y: 6, legendText:"Bing", label: "b 4.67%" },
       {  y: 1, legendText:"Baidu" , label: "b 1.67%"},       
       {  y: 9, legendText:"Others" , label: "o 98%"}
       ]
     }
     ]
   });

chart.render();