Doughnut thickness of the concentric circles

1

How can we set the thickness of the concentric circles in doughnut.

I tried this but not working
“options”:{
“cutout”:90,
“legend”:{
“display”:false
},

Can someone suggest how to set the same please

2

You need to set version=3 to select Chart.js v3 and also put legend in plugins:

{
  type: 'doughnut',
  data: {
    datasets: [
      {
        data: [94, 25, 72, 70, 14],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(255, 159, 64)',
          'rgb(255, 205, 86)',
          'rgb(75, 192, 192)',
          'rgb(54, 162, 235)',
        ],
        label: 'Dataset 1',
      },
    ],
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  },
  options: {
    cutout: 90,
    plugins: {
      legend: {
        display: false,
      },
    },
  },
}

Link to example config

doughnut chart with 90% cutout percentage
doughnut chart with 90% cutout percentage1000×600 36.3 KB

In Chart.js v2 (which is probably what you were trying by default), the attribute is named cutoutPercentage.

3

Thanks Ian.

I was using QuickChart api.

On setting v=3 as parameter to the URL endpoint and cutout as attribute, it did not work.
But with cutoutPercentage, it worked without putting v=3.

If we want to use v=3, and using cutout attribute, can you see what is wrong with the below:

https://quickchart.io/chart?v=3

request body is as below

{
“chart”:{
“type”:“doughnut”,
“data”:{
“labels”:[
“Renewable energy”,
“Non-renewable electricity”
],
“datasets”:[
{
“data”:" + dataCertificate + “,
“backgroundColor”:[
“rgb(0,145,179)”,
“rgb(147,149,152)”,
“rgb(239,236,235)”,
“rgb(0,114,152)”
]
}
]
},
“options”:{
“cutout”:“90%”,
“legend”:{
“display”:false
},
“plugins”:{
“legend”:{
“display”:false
},
“datalabels”:{
“display”:false
},
“doughnutlabel”:{
“labels”:[
{
“text”:”’ + renewablePercent.round() + '%",
“font”:{
“size”:20,
“weight”:“bold”
}
},
{
“text”:“Renewable”,
“font”:{
“size”:10
}
},
{
“text”:“energy”,
“font”:{
“size”:10
}
}
]
},
“outlabels”:{
“text”:"%l",
“color”:"#000",
“backgroundColor”:"#fff",
“stretch”:20,
“font”:{
“resizable”:true,
“minSize”:12,
“maxSize”:18
}
}
}
}
}
}.

4

Hi Ankit,

Unfortunately the doughnutlabel and outlabels plugins don’t support Chart.js v3. So, you’ll have to stick with v2 for now to use those plugins.

5

Thanks. no worries.
Hoping v2 wont go away before the plugin support not available in v3.