title: Set height and width for responsive chart using recharts ( Barchart )
body: <p>I am trying to use recharts to implement a BarChart. But the <code>width={600}</code> and <code>height={300}</code> causes the Barchart to be absolute, not responsive. How to make the Barchart a responsive one? I tried using percentage as <code>width={'50%"} height={"40%"}</code> but did not work.</p>
  
  <pre><code>import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
  
  
  &lt;BarChart className="barChart" width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}} label="heaf"&gt;
        &lt;CartesianGrid strokeDasharray="3 3"/&gt;
        &lt;XAxis dataKey="name"/&gt;
        &lt;YAxis/&gt;
        &lt;Tooltip/&gt;
        &lt;Legend /&gt;
        &lt;Bar dataKey="occupied" barSize={10} fill="#05386b" /&gt;
        &lt;Bar dataKey="available" barSize={10} fill="#fdaa00" /&gt;
        &lt;Bar dataKey="cleaning" barSize={10} fill="#379583" /&gt;
        &lt;Bar dataKey="reserved" barSize={10} fill="#c60505" /&gt;
  &lt;/BarChart&gt;
  </code></pre>