title: Is there any way that I can only show the hovered line in tooltip (Recharts)?
body: <p>I have tried using customized tooltip but my problem was I don't know how to get the index of the payload that is hovered. What I want is to show only the value of the hovered line in the tooltip. For example, I hovered over the value 1 line so I only want to show in the tooltip the value 1 only. </p>
  
  <p>So here is the image</p>
  
  <p><a href="https://i.stack.imgur.com/Hi8vl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Hi8vl.png" alt="enter image description here"></a></p>
  
  <p>Here is my code although I have deleted the Customized Tooltip:</p>
  
  <pre><code>    export default class LineChartPresentational extends React.Component {
        constructor(props) {
        super();
        this.state = {
            clickedLineid: '' }}
  
  
        changeStrokeclick(data) {
           console.log(data, 'see what is coming');
           this.setState({clickedLineID: data} ) }
  
        render() {
           return ( 
              &lt;div&gt;
              &lt;div id="lclastdataref" style={{ textAlign: 'right' }}&gt;
              &lt;span&gt;Last Data Refresh: {linechartdf.date} &lt;/span&gt;
              &lt;/div&gt;
              &lt;div className='line-charts'&gt;
              &lt;div className="line-chart-wrapper " style={{ width: window.innerWidth / 2, height: window.innerHeight / 2, }}&gt;
  
          &lt;ResponsiveContainer&gt;
            &lt;LineChart
              width={width} height={height} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} data={linechartdata} id="Line-Chart"&gt;
              &lt;XAxis dataKey={xAxisColumn} /&gt;
              &lt;YAxis domain={['auto', 'auto']} /&gt;
              &lt;Tooltip cursor={false} /&gt;
              {
                linechartdata.map((entry, index) =&gt; (
                  &lt;Line stroke={index === this.state.clickedLineID ? "#2d75ed" : "#9da0a5"} onClick={this.changeStrokeclick.bind(this, index)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/&gt;
                ))
              }
              &lt;/LineChart&gt;
  
          &lt;/ResponsiveContainer&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; ); }}
  </code></pre>
  
  <p>Please I really need your help. Thanks!</p>