react-chartjs-2 chart.js: How to make strokewidth of dougnut chart thin?

Question

I am implementing one doughnut chart in react js by using react-chart.js-2 chart.js, but I want to customize it according to my requirements, I have done already some customization, but one I need to do is, to make the width of chart thin.

Current Image

enter image description here

Required Image

enter image description here

import React from "react";
import { Doughnut } from "react-chartjs-2";
const data = {
  
  datasets: [
    {
      data: [8, 25, 2, 4, 3, 21, 2],
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56",
        "black",
        "blue",
        "red",
        "purple",
      ],
      borderColor: "transparent",
    
    },
  ],
};

function App() {
  return (
    <div className="App">
      {" "}
      <h2>Doughnut Example</h2>
      <Doughnut
        data={data}
        options={{
          responsive: true,
          maintainAspectRatio: false,
          tooltips: false,
          height: "2",
        }}
      />
    </div>
  );
}

export default App;

Answer 1

You need to define the cutoutPercentage option inside the chart options as follows:

<Doughnut
    data={data}
    options={{
      responsive: true,
      cutoutPercentage: 80,
      ...
    }}
  />

cutoutPercentage: The percentage of the chart that is cut out of the middle (default value is 50).

Answer 2

Edit cutout property in options

let options = {
  responsive: true,
  cutout:"80%",
  legend: {
    display: false,
  },
  layout: {
    padding: 10,
  },
};