Recharts Charts Stacking Issue

Question

I'm using Recharts, the React charting library. My app contains a header that is fixed and at the top, and all the other content just flow under it when I scroll down.

However, the charts I created with recharts are flowing on top of the header.

I've tried increasing the z-index of the header and reducing the z-index of the charts, but none of these approaches are working. I've also tried using isolate, it's not working either.

Answer 1

You need to adjust the css styles to manage z index of your fixed header as well. Make its z index higher than the z index of the charts.

.header {
   z-index:1000;
   position:fixed;
 }

For your charts content if they are not positioned or you haven't specified position for the charts in css then just omit the z index.