create a circle consisting of arc segments - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

create a circle consisting of arc segments

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://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from  w w  w .j a v  a2  s . c  o m*/
Chart.defaults.global.legend.display = false;
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['1','2','3','4','5','6','7','8','9','10','11','12'],
    datasets: [{
      data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      backgroundColor: [
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white'
      ],
      borderColor: 'black',
      borderWidth: 1
    }]
  }
});
myChart.data.datasets[0].backgroundColor[5] = 'red'
myChart.update();
    });

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials