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/
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%;
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With