React-chartjs-2 chart.js: Как уменьшить ширину обводки диаграммы?

Question

Я реализую одну кольцевую диаграмму в react js, используя response-chart.js-2 chart.js, но я хочу настроить ее в соответствии с моими требованиями, я уже выполнил некоторые настройки, но мне нужно сделать ширина диаграммы тонкая.

Текущее изображение

введите описание изображения здесь

Требуемое изображение

введите описание изображения здесь

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

Вам необходимо определить cutoutPercentage вариант внутри параметров диаграммы следующим образом:

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

cutoutPercentage: Процент диаграммы, вырезанной из середины (значение по умолчанию 50).

Answer 2

Изменить свойство выреза в параметрах

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