Tooltip not appearing on pie charts when cells re-render

See original GitHub issue

I’m trying highlight the selected sector of a pie chart, and the following code works. The issue is that the tooltip won’t appear. If I remove the onMouseEnter and onMouseLeave events, then the tooltips show up fine. But of course, I can’t render the selected sector differently in that case. I think there’s an issue with tooltips not appearing when the Cells re-render.

<ResponsiveContainer
  width="100%"
  height={this.props.height}
>
  <PieChart
    width={diameter}
    height={diameter}
  >
    <Tooltip/>
    <Pie
      data={this.props.data}
      dataKey="value"
      onMouseEnter={(e, activeIndex) => this.setState({ activeIndex }) }
      onMouseLeave={() => this.setState({ activeIndex: -1 }) }
    >
      {
        _.map(this.props.data, (entry, i) => (
          <Cell
            key={`cell-${i}`}
            fill={COLORS.CONTRASTING_COLORS[i]}
            fillOpacity={this.state.activeIndex === i ? 1 : 0.25}
          />
        ))
      }
    </Pie>
  </PieChart>
</ResponsiveContainer>

I tried to fix this issue by “actively” controlling the tooltip, but that didn’t work either: https://github.com/recharts/recharts/issues/790

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:5
  • Comments:17 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
zinroccommented, Sep 11, 2017

Figured it out, this works for me:

<Tooltip content={<CustomTooltip />} wrapperStyle={{visibility: this.props.activePieSlice ? 'visible' : 'hidden'}} />

3reactions
gaurav5430commented, May 8, 2020

active={true} does not seem to make any difference to the behaviour of the tooltip at all.

Is there a way to always show the tooltip?

Read more comments on GitHub >

github_iconTop Results From Across the Web

EVERYTHING you wanted to know about Power BI tooltips
Power BI tooltips can add a lot of context to a visual. Patrick shows you everything you need to know about tooltips in...
Read more >
Customizing tooltips in Power BI Desktop
Create custom tooltips for visuals using drag-and-drop. ... The following image shows a tooltip applied to a chart in Power BI Desktop.
Read more >
Create Views for Tooltips (Viz in Tooltip)
The Viz in Tooltip in this example shows a message that indicates that some of the data in the target view is not...
Read more >
jqPlot Pie Chart Tooltips - jquery
Am I right in thinking that the Hightlighter class in jqPlot does not handle tooltips for the PieRenderer? I've spent quite a while...
Read more >
Is there a way to display a popup chart on click o...
I want to popup a chart when a row is clicked on the matrix similar to how a KPI ... But, after refresh,...
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