Javascript examples for Chart.js:Doughnut Chart
Show mutiple data info in doughnut chart
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style id="compiled-css" type="text/css"> #w {//from w w w. j av a2 s. c o m position: relative; height: 200px; width: 200px; } #d1 { position: absolute; top: 0px; left: 0px; } </style> <script type="text/javascript"> window.onload=function(){ var doughnutData = [ { value: 25, color: "#FF0000", highlight: "#5AD3D1", label: "Red" }, { value: 50, color: "#0f0", highlight: "#FFC870", label: "Green" }, { value:25, color:"#eeeeee", highlight: "#eeeeee", label: "", tooltip: {opacity: 0} } ]; var ctx1 = $("#d1").get(0).getContext("2d"); var myChart1 = new Chart(ctx1).Doughnut(doughnutData, { percentageInnerCutout: 90 }); } </script> </head> <body> <div id="w"> <canvas id="d1" height="200" width="200"></canvas> </div> </body> </html>