如何使用 Recharts 获取折线图上的悬停元素

Question

I am actually new here. And new in ReactJS too :(

What I'm trying to do is when I hover over the value 1 line, only the value 1 data will be shown inside the tooltip. So as you can see that's not the case with this tooltip.

Please help I really need it.

Answer 1

Try this code on each Line element

activeDot={{onMouseOver:this.customMouseOver}}

Create a method to handle it

customMouseOver(e){
  return (
   <div className="customMouseOver">
     //e hold the line data in payload element
   </div>
  );
}

Answer 2

Recharts Line activeDot function with custom tooltip

Check this out here !

https://codesandbox.io/embed/recharts-issue-activedot-forked-k8norr?fontsize=14&hidenavigation=1&theme=dark