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.
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.