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

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

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

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

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;

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

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

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

和

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

并且

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

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