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

Bug in tooltip on radial bar chart

See original GitHub issue

Do you want to request a feature or report a bug?

bug

What is the current behavior?

image

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

There does not appear to be any props on the Tooltip component to change this behavior, but the currently tooltip on radial bar charts does not show the same values as before.

Note that the ReCharts demo shows the same behavior: http://recharts.org/#/en-US/api/RadialBarChart

The JSON below is the source of what is processed by our software, which directly creates React ReCharts components. This mechanism is not in question–it works fine under both versions of ReCharts. I’ve included it to show you the ReCharts components that are being created and the values of the props being set.

  {
      "component": "RadialBarChart",
      "container": "chart",
      "data": "traffic",
      "innerRadius": "10%",
      "outerRadius": "80%",
      "components": [
         {
            "component": "RadialBar",
            "dataKey": "waiting",
            "clockwise": true,
            "startAngle": 135,
            "endAngle": -135,
            "minAngle": 15,
            "maxAngle": 255,
            "cornerRadius": 10,
            "background": {
               "fill": "#eee"
            }
         },
         {
            "component": "Legend",
            "layout": "vertical",
            "align": "left",
            "verticalAlign": "middle",
            "iconType": "circle"
         },
         {
            "component": "Tooltip"
         }
      ]
   }

What is the expected behavior?

image

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Current (broken): 1.0.0-beta.6 Prior (working): 0.21.2

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
loriscommented, Jan 25, 2018

@xile611 I confirm the same issue, if the provided data collections contains name parameter, it should be the one displayed in the tooltip, ie in @Eric24 example, it shows waiting which is the name of the dataKey instead of Dogwood, which is the name of hovered value. This is how BarChart behaves, but RadialBarChart do not.

0reactions
Himujjalcommented, May 1, 2020

@xile611 Same problem does persist in the latest version. Please check this part or at least provide a solution to the above problem. Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tooltip on Bar charts gets clipped when embedding
Hi, I am embedding charts in my page. And while tooltips on line charts are always displayed (displayed on top when its space...
Read more >
How to Hack the Bar Chart on Hover on Recharts - Celia O
Standard Rechart Bar Chart on Hover: A tooltip appears and the background colour changes. Surprisingly, Recharts hasn't seem to have added ...
Read more >
Rounded bars breaks tooltip in Altair - vega lite
I am creating a stacked bar chart in altair and discovered that the toolbar and interactivity (data not shown for latter) breaks if...
Read more >
Charts inside a tooltip? Yes, we can. - GravyAnecdote
[Update: in theory, v6.1.1 has made it easier to create the bars described in this post by using REPLACE() and SPACE(). However, at...
Read more >
Orientation - How tooltips behave - Celonis Documentation
Line charts, scatter plots, horizontal bar charts, vertical bar ... Instead, the tooltip should show only the data of the point/circle that ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found