Create Doughnut chart using ChartJs - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Doughnut Chart

Description

Create Doughnut chart using ChartJs

Demo Code

ResultView the demo in separate window 

<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.1.1/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//  w  ww .j a  v  a  2s  .c  om
var doughnutData = [{
    value: 48.3,
    color: "#81d7d8",
    highlight: "#23c6c8",
    label: "Accepted"
}, {
    value: 20.7,
    color: "#f58894",
    highlight: "#d9534f",
    label: "Denied"
}, {
    value: 31,
    color: "#f5c592",
    highlight: "#f8ac59",
    label: "Pending"
}];
var doughnutOptions = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    percentageInnerCutout: 45, // This is 0 for Pie charts
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    fullWidth: true,
    tooltipFontSize: 10
};
var ctx = document.getElementById("doughnutChart").getContext("2d");
var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
console.log(DoughnutChart);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="doughnutChart" width="95" height="95" style="width: 95px; height: 95px;"></canvas>  
   </body>
</html>

Related Tutorials