How to make the tooltip follow the cursor in Piechart?

Question

How can I make the tooltip follow the cursor in a pie chart made using recharts?

Currently, a tooltip is shown but it is just stuck at a location until the cursor directly moves into it. what I need is a tooltip which moves along with the cursor. I can be at a specific position may be at the top of the chart or anything.

Demo: https://jsfiddle.net/kg7Ldj1o/

I need something like this shown in the radial bar chart.http://recharts.org/en-US/api/RadialBarChart Here the tooltip moves along with the cursor.

<PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
  <Tooltip />
  <Pie
    data={data}
    cx={420}
    cy={200}
    startAngle={180}
    endAngle={0}
    cornerRadius={40}
    innerRadius={60}
    outerRadius={80}
    fill="#8884d8"
    paddingAngle={-15}
  >
    {data.map((entry, index) => (
      <Cell
        fill={
          index === 0 || index === data.length - 1
            ? COLORS[index % COLORS.length]
            : 'transparent'
        }
        stroke={
          index === 0 || index === data.length - 1
            ? COLORS[index % COLORS.length]
            : 'transparent'
        }
      />
    ))}
  </Pie>
  <Pie
    data={data}
    cx={420}
    cy={200}
    startAngle={180}
    endAngle={0}
    cornerRadius={0}
    innerRadius={60}
    outerRadius={80}
    fill="#8884d8"
  >
    {data.map((entry, index) => (
      <Cell
        fill={
          index === 0 || index === data.length - 1
            ? 'transparent'
            : COLORS[index % COLORS.length]
        }
        stroke={
          index === 0 || index === data.length - 1
            ? 'transparent'
            : COLORS[index % COLORS.length]
        }
      />
    ))}
  </Pie>
</PieChart>;

[react-tooltip](https://www.npmjs.com/package/react-tooltip) this package might help you out — Sunil Chaudhary, Dec 12 '19 at 15:16
One question sunil i had. Is that the corner radius doesnot seem to work in small sections in Pie. You can have a look at this https://jsfiddle.net/96q73Lbe/ — Sagar Acharya, Dec 12 '19 at 15:18
That is happening because the corresponding section will look distorted and won't be visible properly. — Sunil Chaudhary, Dec 18 '19 at 21:35
https://www.w3schools.com/howto/howto_css_tooltip.asp https://stackoverflow.com/questions/7790725/javascript-track-mouse-position — JGFMK, Dec 23 '19 at 15:16

score 1 · Accepted Answer · answered Dec 24 '19 at 10:20

1

You can listen for onMouseMove and update the left, top offset of .recharts-tooltip-wrapper element using chartX and chartY provided in the event.

Demo: jsfiddle link

I have added a function onPieEnter as bellow,

onPieEnter(e){
    console.log(e);
    if(e){
      let toolTipWrapper = document.getElementsByClassName("recharts-tooltip-wrapper")[0];
      toolTipWrapper.style.transition = 'transform 400ms ease 0s';
      toolTipWrapper.style.transform = "translate("+ (e.chartX + 10) +"px, "+ (e.chartY + 10) +"px)";
    }
}

answered Dec 24 '19 at 10:20

Ejaz47

145
1
12

Just a question. Would it be possible to make the tooltip be at the top always? I mean top of the chart. – Sagar Acharya Dec 24 '19 at 10:26
I mean be at the top of the cursor. I changed the X and Y and it worked. Thanks any way. :) – Sagar Acharya Dec 24 '19 at 10:29
One question I had is that when I changed the width on the to 500 from 800 the tooltip only follows the cursor on the blue part. The tooltip is not being followed in green and orange parts. – Sagar Acharya Jan 06 '20 at 03:53
I checked the console and it seems like the event is getting returned as null in this case. – Sagar Acharya Jan 06 '20 at 03:59

How to make the tooltip follow the cursor in Piechart?

1 Answers1