How to get the hovered element on Line Chart using 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>
  );
}