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.

Tooltip border issue in Recharts v2.1.13

See original GitHub issue

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

Reproduction link

https://codesandbox.io/s/pedantic-butterfly-fo30ni?file=/src/App.tsx

Steps to reproduce

Take Recharts Simple Bar chart example and open it in the codesandbox https://recharts.org/en-US/examples/SimpleBarChart
Upgrade recharts to v2.1.13 in package.json

What is expected?

Chart tooltip should not have a visible border if not defined.

What is actually happening?

The tooltip border appears. In Firefox browser its solid red color, in Chromium its solid black color. The border appears randomly and there is no way how to remove it with CSS.

tooltip-issue

Issue Analytics

State:
Created a year ago
Reactions:6
Comments:11

Top GitHub Comments

13reactions

dlog6649commented, Aug 5, 2022

add property wrapperStyle={{ outline: “none” }} at Tooltip <Tooltip wrapperStyle={{ outline: “none” }} />

1reaction

ryancrunchicommented, Aug 24, 2022

I have the same issue. I think wrapper style should be outline: 'none' by default

Top Results From Across the Web

tooltip position recharts - CodeSandbox

Activating extension 'vscode.typescript-language-features' failed: Could not find bundled tsserver.js.

css - Change the styling of tooltip - recharts - Stack Overflow

Looks like there is margins defined on the <p> elements. .recharts-tooltip-wrapper { .customTooltip { p { margin:0; } } }.

React Charts - Simple, immersive & interactive charts for React

styles.css ... react-dom^17.0.2 ... n It also showcases the tooltip's ability to portal outside of an overflow\n element (the blue border-box).

Release notes - Masala Design System

2.5.0-2 (2021-09-29). Highlights ... Table/Grid horizontal scrolling issue is fixed. ... Tooltip in Icon Button Component has been added (f9f14233) ...

greymatter.io Documentation | Core Services

Upgraded urfavecli/v2 to v2.16.3. Updated instances of 'Grey Matter' in the repo to 'greymatter' ... use default border colors for tooltips (76269a2).