Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ResponsiveContainer - legend overlapping with chart when re-rendering

See original GitHub issue

I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Open the codesanbox attached.

The problem seems to be when the component status changes and the chart needs to refresh. If the re-render is disabled than the legend is positioned correctly.

  useEffect(() => {
    setTest("");
  }, []);

What is expected?

Legend position should be correct

What is actually happening?

Legend overlapping with chart when re-rendering

Environment	Info
Recharts	v2.1.6
React	reactjs 17
System	all
Browser	all

seems to be similar to issue https://github.com/recharts/recharts/issues/2636

But I’m using rechart 2.1.6 and the issue is still there

Issue Analytics

State:
Created 2 years ago
Reactions:12
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

hansottcommented, Dec 22, 2021

@semoal I might have a look at this later (probably in the coming days), was noticing this in our product. Thanks for your work on this library! ❤️

1reaction

semoalcommented, Dec 22, 2021

Yes, confirmed the bug was introduced in the 2.0.3 release where we migrated UNSAFE react methods to derivedState.

https://github.com/recharts/recharts/commit/29b793b33ea0c2c545b56710c4a82581c9a89831

Will mark it as a bug, and if someone wants to take a look, go ahead!

Top Results From Across the Web

Legend overlapping when data from server - Stack Overflow

When the component first rendering legend is overlapping but from the next rendering the chart works well. How can I make it working...

recharts/CHANGELOG and recharts Releases (Page 9) | LibHunt

Fix: ResponsiveContainer makes legend overlapping with chart when re-rendering (#2660); Fix: rendering of a single bar when maxBarSize is absent and ...

recharts | Yarn - Package Manager

Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write...

CHANGELOG.md · Gitee 极速下载/recharts - Gitee.com

... Fix: removes overlapping legend for categorical charts (#2752) ... Fix: ResponsiveContainer makes legend overlapping with chart when re-rendering (#2660) ...

Index of Deprecated APIs - SAPUI5 SDK

This base class defines basic properties for legend templates. sap.gantt ... of a focused search field is restored after re-rendering automatically.