How to set the size of the arc in ChartJS?

Question

I can't set the arc size for the chart. How to set the size of the arc? Also, I can't make the animation work, although I took an example from the official documentation:/

Here is my code:

var ctx = document.getElementById('myChart-<%= ChartId %>').getContext('2d');

var myChart = new Chart(ctx, {
 type: 'doughnut',
 data: {
     datasets: [{
         data: [
             11,69,20
         ],
         backgroundColor: [
             "#ffb74d",
             "#4db6ac",
             "#bf360c"
         ]
     }]
 },
 options: {
     tooltips: {
          enabled: false
     },
     plugins: {
         labels: {
             render: 'percentage',
             precision: 2,
             showZero: true,
             fontSize: 30,
             fontColor: ['#2c405a', '#2c405a', 'white'],
             fontFamily: "PTSansBold",
         }
     },
     animation: {
         duration:5000
     }
 }
});

Answer 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>

Answer 2

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.

Answer 3

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,
   ...
}