重新图表关闭特定行的工具提示

Question

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 component, 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 component 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?

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.org/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} />