react-chartjs-2 chart.js：如何使dougnut图表的strokewidth变薄？

问题描述

我正在使用react-chart.js-2 chart.js在react js中实现一个甜甜圈图，但是我想根据自己的需求对其进行自定义，我已经做了一些自定义，但是我需要做的是，以使图表的宽度变窄。

当前图片

enter image description here

所需图片

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;

解决方法

您需要按如下所示在图表选项中定义cutoutPercentage选项：

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

cutoutPercentage：从中间切出的图表百分比（默认值为50）。