Is there any way that I can only show the hovered line in tooltip (Recharts)?

Question

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.

So here is the image

Here is my code although I have deleted the Customized Tooltip:

    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 ( 
            <div>
            <div id="lclastdataref" style={{ textAlign: 'right' }}>
            <span>Last Data Refresh: {linechartdf.date} </span>
            </div>
            <div className='line-charts'>
            <div className="line-chart-wrapper " style={{ width: window.innerWidth / 2, height: window.innerHeight / 2, }}>

        <ResponsiveContainer>
          <LineChart
            width={width} height={height} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} data={linechartdata} id="Line-Chart">
            <XAxis dataKey={xAxisColumn} />
            <YAxis domain={['auto', 'auto']} />
            <Tooltip cursor={false} />
            {
              linechartdata.map((entry, index) => (
                <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}`}/>
              ))
            }
            </LineChart>

        </ResponsiveContainer>
      </div>
    </div>
  </div> ); }}

Please I really need your help. Thanks!

Mysterious

Answer 1

Custom Tooltip is your option to do this.

<Tooltip content={this.customTooltipOnYourLine}/>

Here customTooltipOnYourLine is your method to return custom tooltip

    customTooltipOnYourLine(e){
        if (e.active && e.payload!=null && e.payload[0]!=null) {
              return (<div className="custom-tooltip">
                    <p>{e.payload[0].payload["Column Name"]}</p>
                  </div>);
            }
        else{
           return "";
        }
      }

Check this link for more info Recharts Tooltip

Edit

Check this answer

Answer2

Skewness

The correct link to the Recharts Tooltip is: recharts.org/en-US/api/Tooltip I cannot make this as an edit because it's less than 6 characters. – Neuropsychiatry

Answer 2

A bit late but I hope this helps someone in the future. I figured out a way to render the tooltip for one line at a time when hovering the cursor over it. See this small demo I made:

https://codesandbox.io/p/sandbox/react-typescript-forked-7w35hw

You can customize the tooltip by modifying this portion:

const CustomTooltip: React.FC<CustomTooltipProps> = ({
  data,
  position,
  color,
}) => {
  return (
    <div
      style={{
        position: "absolute",
        left: position.x + 10,
        top: position.y - 40,
        backgroundColor: "white",
        color: color,
        border: `1px solid ${color}`,
      }}
    >
      {`${data.xAxisValue}`}
      <p
        style={{ margin: "5px 0 0 0" }}
      >{`${data.seriesName}: ${data.value}`}</p>
    </div>
  );
};

Limitations:

• It will only render the data points, ideally I would've liked to render the tooltip based on proximity of the nearest point.
• Coded in Typescript
• I'm really new to JS and frontend in general so I do not doubt some parts could be improved

Ene

Answer 3

Using below logic you can achieve individual tool-tip for each dot.

Demo Link: Line chart with custom Tooltip

1. Hide default Tooltip

2. Add mouse event function on Line (when dot is active)

   <Line
         activeDot={{
           onMouseOver: this.showToolTip,
           onMouseLeave: this.hideToolTip
         }}
        ....
       />
   

3. custom tooltip div

     <div className="ui-chart-tooltip" ref={ref => (this.tooltip = ref)} >
         <div className="ui-chart-tooltip-content" />
     </div>
   

4. showToolTip and hideTooltip Function

        showToolTip = (e) => {
         let x = Math.round(e.cx);
         let y = Math.round(e.cy);
         this.tooltip.style.opacity = "1";
         this.tooltip.childNode[0].innerHTML = e.payload["value"];
   
         };
   
         hideTooltip = e => {
         this.tooltip.style.opacity = "0";
         };
   

Disclimax