Rechart Responsive container does not render

Question

Im trying to render a bar chart to fit 100% its container with reChart:

http://recharts.org/#/en-US/api/ResponsiveContainer

 <div className="question">
    <div className="question-container">
        <ResponsiveContainer width="100%" height="100%">
            <BarChart   layout="vertical" data={rows}
                      margin={{top: 5, right: 30, left: 20, bottom: 5}}>

                <YAxis axisLine={false} tickLine={false} width={400} dataKey="name" type="category">
                </YAxis>
                <Bar dataKey="valuePre" fill="#00a0dc" label={<Text scaleToFit={true} verticalAnchor="middle" />}/>
                <Bar dataKey="valuePost" fill="#c7c7c7"  label={<Text verticalAnchor="middle" />}/>

            </BarChart>
        </ResponsiveContainer>
    </div>
</div>

When I add the ResponsiveContainer component, the data stops rendering. And as soon as I taker out the ResponsiveContainer and set the width and height of the BarChart component, I can see the bar chart again.

Can anyone help me spot what Im doing wrong?

Heres a fiddle with the problem:

http://jsfiddle.net/eyh80eeo/

Answer 1

Since ResponsiveContainer relies on the parent's dimensions you need to make sure the parent has a proper width and height.

The reason why a setting on <Barchart /> works is because it sets its own width and height.

Check out this fiddle RESPONSIVECONTAINER

I added CSS to the parent classes you have

.question {
  width: 500px;
  height: 500px;
}

.question-container {
  width: 100%;
  height: 100%;
}

Answer 2

I had a similar issue when using the ResponsiveContainer component, within a CSS grid.

I simply added width={'99%'} to the ResponsiveContainer and it resized correctly.

<ResponsiveContainer width={'99%'} height={300}>

Reference: Recharts Responsive Chart not responsive inside a CSS grid