Chart.js Doughnut Chart Sizing issues - Javascript Chart.js

Javascript examples for Chart.js:Doughnut Chart

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

Description

Chart.js Doughnut Chart Sizing issues

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <style>

.myChartDiv {/*ww  w  .  j  a v  a2s  .co  m*/
   border: 1px #CCC solid;
   width: 200px;
   height: 200px;
}


      </style> 
   </head> 
   <body translate="no">   
      <div class="myChartDiv"> 
         <canvas id="myChart"></canvas> 
      </div>   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
      <script>
      var ctx2 = document.getElementById('myChart').getContext('2d');
var campaignDonut = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [4, 6-4],
            backgroundColor: ['#FFA400', 'rgba(200, 213, 222, 0.5)'],
        }],
    },
    options: {
        aspectRatio: 1,
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
            }
        },
        responsive: true,
        cutoutPercentage: 90,
        legend: {
            display: false,
        },
        title: {
            display: false,
        },
    }
});
      </script>  
   </body>
</html>

Related Tutorials