如何在React.js中调整Chart.JS元素的大小？

Question

我有一个React组件Webstats，该组件从react-chartjs-2库返回一个甜甜圈图。代码如下所示：

const Webstats = () => {
  //code to create chart.
  return <Doughnut data={pd} />;
}

我在称为Dashboard的另一个组件中使用了此组件。我想在“注销”按钮旁边显示图表。两者应该在同一行中。我为此使用css的flex属性。

const rowC = {
  display: "flex",
  flexDirection: "row"
};

const Dashboard = () => {
  return (
    <div style={rowC}>
      <Webstats />
      <Link to="/">
        <div>
          <button onClick={auth.logout}>Logout</button>
        </div>
      </Link>
    </div>
  );
};

export default Dashboard;

但是问题在于，与注销按钮相比，图表尺寸太大。

我想缩小图表尺寸，大约为<div style={rowC}>宽度的30％。我尝试了这些事情：

return <Doughnut data={pd} width="30%"/>;

和

return (
    <div style={rowC}>
      <Webstats width="30%" />
      // rest of html
)

还有

return (
    <div width="30%">
      <Doughnut data={pd} />
    </div>
  );

但是这些都没有给我想要的结果。如何将图表调整为<div style={rowC}>宽度（和自动调整的高度）的30％？

Answer 1

documentation for ChartJS指出您需要将maintainAspectRatio设置为false。

为了使Chart.js遵守自定义大小，您需要将maintainAspectRatio设置为false。

<Doughnut
  data={data}
  width={"30%"}
  options={{ maintainAspectRatio: false }}
/>