[Chartjs]-How to set the size of the arc in ChartJS?

by

1👍

✅

According to Config Options, cutoutPercentage defines the percentage of the chart that is cut out of the middle. To also make animation work, place the canvas inside a div and add responsive: true to your options. 

options: {
   responsive: true,
   cutoutPercentage: 30,
   ...
}

The animations works fine with what you defined in your options.

var myChart = new Chart(document.getElementById('myChart'), {
   type: 'doughnut',   
   data: {
     datasets: [{
         data: [
             11,69,20
         ],
         backgroundColor: [
             "#ffb74d",
             "#4db6ac",
             "#bf360c"
         ]
     }]
   },
   options: {
     responsive:true,
     cutoutPercentage: 60,
     tooltips: {
          enabled: false
     },
     plugins: {
         labels: {
             render: 'percentage',
             precision: 2,
             showZero: true,
             fontSize: 30,
             fontColor: ['#2c405a', '#2c405a', 'white'],
             fontFamily: "PTSansBold",
         }
     },
     animation: {
         duration: 5000
     }
   }
});
div {
  width: 300px;
  height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div>
  <canvas id="myChart"></canvas>
</div>

1👍

The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset.

For example, if you want to change the width of the border there is an option of cutoutPercentage. 

options: {
   cutoutPercentage: 80,
   ...
}

Similarly, you can find other options from the official documentation.

https://www.chartjs.org/docs/latest/charts/doughnut.html

var ctx = document.getElementById('chart').getContext('2d');

var myChart = new Chart(ctx, {
 type: 'doughnut',
 data: {
     datasets: [{
         data: [
             11,69,20
         ],
         backgroundColor: [
             "#ffb74d",
             "#4db6ac",
             "#bf360c"
         ]
     }]
 },
 options: {
     cutoutPercentage: 80,
     animation: {
         duration:5000
     }
 }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>

I hope this helps. Please let me know if you have any doubt.

1👍

if anyone looking for fix as per chartJS 3 and year-2022

they have changes some configurations and this will work as follow

options: {
   cutout: 80,
   ...
}

Leave a comment