React-chartjs-2: Donut cutout percentage (Inner radious) not working

[harshal-wani]

I'm trying to set percentage (Inner and outer radius) using:

Try 1:

options: {
      cutoutPercentage:80
     }

Try 2:

options: {
      cutoutInnerPercentage:80
     }

Try 3: <Doughnut data={data} cutoutPercentage={80}/>

still, donut showing with default implementations as given in the example.

[spkellydev]

@harshal-wani

<Doughnut
          data = {{
            datasets: [{
                data: [10, 20, 30]
            }],

            // These labels appear in the legend and in the tooltips when hovering different arcs
            labels: [
                'Red',
                'Yellow',
                'Blue'
            ]
          }}
          options= {{
            cutoutPercentage: 80,
            rotation: 120
          }}
        />

[harshal-wani]

@harshal-wani

<Doughnut
          data = {{
            datasets: [{
                data: [10, 20, 30]
            }],

            // These labels appear in the legend and in the tooltips when hovering different arcs
            labels: [
                'Red',
                'Yellow',
                'Blue'
            ]
          }}
          options= {{
            cutoutPercentage: 80,
            rotation: 120
          }}
        />

Thanks @spkellydev

I implemented with below code:

const donutData = {
    labels: [
        'Data Group 1',
        'Data Group 2',
        'Data Group 3',
        'Data Group 4'
    ],
    datasets: [{
        data: [100, 100, 100, 100],
        backgroundColor: COLORS,
        hoverBackgroundColor: COLORS,
    }]
};

const donutOptions = {
  responsive: false,
  width:500,
  height:500,
  cutoutPercentage: 80,
};

<Doughnut data={donutData} options={donutOptions}/>