I have a LineChart with N lines. One line is fixed (straight line with a fixed y-axis value and same x-axis values as all other lines, the time value). In most cases, there's only the fixed line and just one other line with values that change. Both display correctly, but when I hover over them, the Tooltip shows data for the fixed line. I need to stop displaying the fixed line data point inside the Tooltip and start showing only the other line's data (which gets displayed ok when there's no fixed line on the chart).

The Tooltip is just:

<Tooltip
  contentStyle={{ fontSize: 12 }}
  labelStyle={{ fontSize: 12 }}
/>

The fixed line is:

<Line
  key="fixed-key"
  isAnimationActive={false}
  dot={false}
  type="linear"
  dataKey="value"
  data={fixedData}
  connectNulls
  activeDot={false}
  legendType="rect"
  name="Threshold"
/>

and the dynamic line is almost the same, just a few extra props (might be worth mentioning that this line gets it's data from the data passed directly to the parent ponent, the LineChart:

<Line
  key={`line-data-${id}`}
  isAnimationActive={false}
  dot={false}
  type="linear"
  dataKey={id}
  connectNulls
  stroke={lineColor || colorIndex[index]}
  activeDot={{ r: 5 }}
  legendType="rect"
  name={widgetLabel || formatLabel(metric)}
  strokeDasharray={lineType === 'dashed' ? '1 1' : null}
/>

So, to reiterate - the chart itself works fine, the only issue is the Tooltip ponent showing data for the first line, instead of just the second one - don't know how to do that, to omit a line from the Tooltip display.

Is this possible in Recharts?

I have a LineChart with N lines. One line is fixed (straight line with a fixed y-axis value and same x-axis values as all other lines, the time value). In most cases, there's only the fixed line and just one other line with values that change. Both display correctly, but when I hover over them, the Tooltip shows data for the fixed line. I need to stop displaying the fixed line data point inside the Tooltip and start showing only the other line's data (which gets displayed ok when there's no fixed line on the chart).

The Tooltip is just:

<Tooltip
  contentStyle={{ fontSize: 12 }}
  labelStyle={{ fontSize: 12 }}
/>

The fixed line is:

<Line
  key="fixed-key"
  isAnimationActive={false}
  dot={false}
  type="linear"
  dataKey="value"
  data={fixedData}
  connectNulls
  activeDot={false}
  legendType="rect"
  name="Threshold"
/>

and the dynamic line is almost the same, just a few extra props (might be worth mentioning that this line gets it's data from the data passed directly to the parent ponent, the LineChart:

<Line
  key={`line-data-${id}`}
  isAnimationActive={false}
  dot={false}
  type="linear"
  dataKey={id}
  connectNulls
  stroke={lineColor || colorIndex[index]}
  activeDot={{ r: 5 }}
  legendType="rect"
  name={widgetLabel || formatLabel(metric)}
  strokeDasharray={lineType === 'dashed' ? '1 1' : null}
/>

So, to reiterate - the chart itself works fine, the only issue is the Tooltip ponent showing data for the first line, instead of just the second one - don't know how to do that, to omit a line from the Tooltip display.

Is this possible in Recharts?

• javascript
• recharts

• what if you, for the <Line> ponent you do not want the tooltip you try adding a param of tooltip=false? – FujiRoyale Commented Mar 11, 2020 at 1:13
• @FujiRoyale unfortunately, that doesn't do anything. I've also tried tooltipType="none", which I've found in one example, but it doesn't work either. Neither the tooltip, nor the tooltipType are mentioned in the Line chart docs. – dnmh Commented Mar 11, 2020 at 1:21
• After some simple googling it looks like the remended answer is to make a custom tooltip and trigger it via mouseover on the dots. stackoverflow./questions/49142917/… – FujiRoyale Commented Mar 11, 2020 at 2:23

1 Answer 1

In case this helps anybody in the future.

You can set the name to foo for the specific <Line> that you want to hide the tooltip.

https://recharts/en-US/api/Line

The name of data. This option will be used in tooltip and legend to represent a line. If no value was set to this option, the value of dataKey will be used alternatively.

Then use a CustomTooltip Formatter and check if the name is the same as the specific line.

const tooltipFormatter = ({ value, name }) => {
    if (name === 'foo') return
    return your-jsx-for-tooltip
}

<Tooltip formatter={tooltipFormatter} />