'Recharts CustomTooltip loses background opacity

I first came across this when implementing my own CustomTooltip, but I think this might actually be a recharts bug, as even the codesandbox example from the documentation site has the same issue. If you remove 'content={< CustomTooltip />}' from line 110 on that codesandbox, you'll turn the tooltip into a basic one, which will look like this:

But when you put that piece back in so that it's what the documentation has as an example for a CustomTooltip, the background (for lack of a better term) of the tooltip disappears.

Does anyone know if this is a recharts bug, or maybe I'm just doing something wrong? I just want to get my Custom Tooltip to have the same visual look as the basic one

reactjs recharts

Solution 1:^[1]

In your codesandbox you are importing styles.css but It doesnt contain any styles for custom-tooltip class.

When you provide custom content for the tooltip you have to define the styles yourself. When content prop is omitted, the package sets the style internally to the tooltip.

Solution 2:^[2]

I figured it out. As rahuuzz said, providing custom content for the tooltip also overrides the base styling, so that has to be provided. My tooltip in my chart now looks like this:

<Tooltip 
    content={<CustomTooltip />}
    wrapperStyle={{ backgroundColor: "white", borderStyle: "ridge", paddingLeft: "10px", paddingRight: "10px" }}
/>

Basically just had to add the wrappedStyle prop with some basic styling. Hopefully this helps someone else googling in the future

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	rahuuzz
Solution 2	Chowdahhh

'Recharts CustomTooltip loses background opacity

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]