Recharts Responsive Container does not resize correctly in flexbox

css reactjs user-interface flexbox recharts
Lucas D picture Lucas D · Jun 16, 2018 · Viewed 13.2k times · Source

I'm trying to create a custom collapsable legend for my data visualization app. It uses react and recharts. the component renders nicely the first time. But when I collapse the legend and reopen it, the responsive container doesn't shrink to fit. This would be easier if I knew the size of the parent container in pixels but I don't have that information on render. Is this a bug with recharts or flex box or am I doing it wrong?

Heres the code: https://codesandbox.io/s/8krz9qjk52

Clarification: The problem is that when I close and then open the legend, the legend component gets pushed out of the viewing area and the chart does not shrink back to the original smaller size.

Answer

atomictom picture atomictom · Nov 8, 2018

It seems rather hacky but a viable fix is to set width to 99% with a height or aspect ratio.

<ResponsiveContainer width="99%" aspect={3}>

See this issue:

https://github.com/recharts/recharts/issues/172

Related questions

React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More