title: How to resize Chart.JS element in React.js?
body: <p>I have a React component <code>Webstats</code> which returns a Doughnut chart from <strong>react-chartjs-2</strong> library. Here is how the code looks like:</p>
  
  <pre><code>const Webstats = () =&gt; {
    //code to create chart.
    return &lt;Doughnut data={pd} /&gt;;
  }
  </code></pre>
  
  <p>I use this component inside another component called <code>Dashboard</code>. I want to display the chart alongside a Logout button. Both should be in the same row. I use <code>flex</code> property of css for this purpose.</p>
  
  <pre><code>const rowC = {
    display: "flex",
    flexDirection: "row"
  };
  
  const Dashboard = () =&gt; {
    return (
      &lt;div style={rowC}&gt;
        &lt;Webstats /&gt;
        &lt;Link to="/"&gt;
          &lt;div&gt;
            &lt;button onClick={auth.logout}&gt;Logout&lt;/button&gt;
          &lt;/div&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    );
  };
  
  export default Dashboard;
  </code></pre>
  
  <p>But the problem is that, chart size is too big as compared to logout button.</p>
  
  <p><a href="https://i.stack.imgur.com/p4ONx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/p4ONx.png" alt="Screenshot"></a></p>
  
  <p>I want to make chart size small, around 30% of the width of <code>&lt;div style={rowC}&gt;</code>. I tried these things:</p>
  
  <pre><code>return &lt;Doughnut data={pd} width="30%"/&gt;;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>return (
      &lt;div style={rowC}&gt;
        &lt;Webstats width="30%" /&gt;
        // rest of html
  )
  </code></pre>
  
  <p>and also</p>
  
  <pre><code>return (
      &lt;div width="30%"&gt;
        &lt;Doughnut data={pd} /&gt;
      &lt;/div&gt;
    );
  </code></pre>
  
  <p>But none of this gives me the desired result. How to I resize the chart to 30% of the width (and height auto adjusted) of the <code>&lt;div style={rowC}&gt;</code>?</p>