Recharts：如何禁用工具提示内容随鼠标光标移动

Question

有没有办法阻止工具提示的内容跟随鼠标指针？

如图所示，内容位于指针下方。如果指针向下移动，内容将移至图表顶部。有没有办法阻止这种行为并将内容保留在指针悬停的栏的顶部？

Answer 1

您需要为工具提示定义一个 position 道具，例如

<Tooltip position={{ x: 100, y: 140 }}/>

您可以在 Recharts docs

中查看更多相关信息

编辑：

如果您需要在悬停栏上方呈现工具提示，据我在文档中所见，没有开箱即用的解决方案。但是您可以手动管理它：

使用 <Bar>

onMouseEnter

将该值（带有工具提示的偏移量）放入状态
根据新状态更新<Tooltip>的位置

const App = () => {
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 })

  const onMouseEnter = (e) => {
    const tooltipHeight = 60 // you need to change this based on your tooltip
    setTooltipPosition({ x: e.x, y: e.y - tooltipHeight })
  }

  return (
    <BarChart
      width={500}
      height={300}
      data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip
        position={tooltipPosition}
        allowEscapeViewBox={{ y: true }}/>
      <Legend />
      <Bar dataKey="key" fill="#1DDDFF" onMouseEnter={onMouseEnter}/>
    </BarChart>
  )
}

Recharts：如何禁用工具提示内容随鼠标光标移动

Recharts: How to disable tooltip content from moving with mouse cursor

reactjs

recharts