Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

I'm using the <AreaChart /> component for a project and I added a custom content component into the <Legend /> component itself. I have a button that is meant to switch between a Table view and a Chart view, however, It seems like it interferes with the <ResponsiveContainer />. Each time the chart is re-rendered, it takes the whole height of the responsive container without considering the <Legend/>, which leads to overlapped components (see video attached)

For now, the <Legend /> component is in position: absolute, which matched the desired design, but even if I switch the component to a relative position, the chart is still taking into account the <Legend /> within its height.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

What is the expected behavior?

<AreaChart /> should always have the defined height when re-rendering, no matter If there is a Legend or not.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

[email protected] - Chrome, Firefox, Safari