Search code examples
javascriptsvgfrontendtooltiprecharts

How to show a tooltip for rechart which is bigger than the chart

I'm using recharts library to implement the TinyLineChart for my project.
It's all working fine until I tried to add custom tooltip for the chart.

I have drawn several charts and those heights are quite small.
TinyCharts

It looks fine at this stage, but when I'm implementing the tooltips for these charts, I found that it's clipping.
enter image description here

It feels like it is because the chart height is too small, but this is design and I cannot change it.
Ideally, I wonder if the tooltips can be drawn over the other charts. Like this.
enter image description here

I already tried to add css { overflow: hidden } but failed.

I'm working on recharts@2.3.2.

Solution

  • I solved that by passing z-index to wrapperStyle of <Tooltip/>. Like this:

    wrapperStyle={{
        zIndex: 1,
}}

    You might need to increase that number. I hope that helps!