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.

BarChart: Tooltip is broken since beta.3

See original GitHub issue

See: http://jsfiddle.net/ad071owf/ Same Fiddle with beta.2: http://jsfiddle.net/ad071owf/1/

If you hover over one of the bars, there is a gray rectangle shown at the left side. I tried a git bisect to find the commit that introduced the issue, but I cannot reproduce it in the demo.

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

jochenbergercommented, Nov 24, 2017

Beta 5 too: http://jsfiddle.net/ad071owf/3/

0reactions

JohnStarichcommented, Jul 19, 2019

I ran into something similar to this on the latest version (1.6.2) where the gray box was positioned on top of the chart data. I’ve opened a PR that fixes my issue: https://github.com/recharts/recharts/pull/1811 ~I’ve reversed the order of the rendered elements, placing the highlight box toward the back. Not the greatest solution, but it seemed to do the trick for me.~

Edit: turns out the order of children inside the chart component mattered for the Tooltip. Moving the Tooltip to the beginning fixed my issue. I might turn my PR into documentation so other folks won’t repeat my mistake 😬

Top Results From Across the Web

Chart.js (3.7) - Why do the tooltips not appear? - Stack Overflow

I took your code, changed the Chart.js script file (now importing from cdnjs.cloudflare.com) and added the missing canvas . The tooltips ...

Latest Bar Chart (BETA) Panel topics - Grafana Community

Topic Replies Views Activity About the Bar Chart (BETA) Panel category 1 203 November 22, 2022 Creating opacity color scheme based on severity 5 21...

Filter context not passing into Tooltip page

Solved: Problem: some of the filters applied to the page are not passed into the tooltip page (despite being present in the list...

Tooltip | Common Settings - AnyChart Documentation

Tooltip is a text box that is hidden by default and can be displayed when a point on a chart is hovered over....

stacked bar chart inverse tooltip order bug - CodeSandbox

Forked FromReact - Basic Example; Environmentcreate-react-app. Files. public. src. App.js. index.js. registerServiceWorker.js. package.json. Dependencies.