Chart.js to set Doughnut background-color - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

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

Description

Chart.js to set Doughnut background-color

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/2.1.6/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

div {/*from   w ww  .j a  v a2  s  . c om*/
   width:400px;
   height:300px;
   background: white;
   padding: 1em;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var radiusBackground = function() {
  var self = this;
  self.draw = function(chartInstance) {
    if(chartInstance.options.radiusBackground) {
      var x = chartInstance.chart.canvas.clientWidth / 2,
          y = chartInstance.chart.canvas.clientHeight / 2,
          ctx = chartInstance.chart.ctx;
      ctx.beginPath();
      ctx.arc(x, y, chartInstance.outerRadius - (chartInstance.radiusLength / 2), 0, 2 * Math.PI);
      ctx.lineWidth = chartInstance.radiusLength;
      ctx.strokeStyle = chartInstance.options.radiusBackground.color || '#d1d1d1';
      ctx.stroke();
    }
  };
  return {
    beforeDatasetsDraw: self.draw,
    onResize: self.draw
  }
};
Chart.plugins.register(new radiusBackground());
var chartElement = document.getElementById('doughnut-chart');
var chart = new Chart(chartElement, {
  type: 'doughnut',
  options: {
    radiusBackground: {
      color: '#d1d1d1'
    },
    cutoutPercentage: 90,
    title: {
      display: false,
    },
    legend: {
      display: false,
    },
  },
  data: {
    labels: ["Type 1", "Type 2", "Type 3"],
    datasets: [{
      data: [2, 5, 1],
      backgroundColor: ["#a3c7c9","#889d9e","#647678"],
      borderWidth: 0,
      hoverBackgroundColor: ["#96b7b9","#718283","#5c6b6d"]
    }]
  }
});
    }

      </script> 
   </head> 
   <body> 
      <div> 
         <canvas id="doughnut-chart" width="400" height="300"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials