容器可滚动时Rechart Tooltip无法溢出，如何实现Y轴方向溢出？

问题核心在于你外层容器设置了overflowY: "hidden"，这个样式会强制截断所有Y轴方向超出容器的内容——哪怕你开了Tooltip的allowViewBoxEscape，也绕不开DOM层面的overflow限制。要实现Tooltip在Y轴方向溢出，按以下步骤调整：

方案1：修改外层容器的overflow属性 #

直接把外层容器的overflowY从hidden改成visible，同时保留overflowX: "scroll"，这样既保留X轴滚动功能，又允许内容在Y轴方向溢出：

<div style={{ overflowX: "scroll", overflowY: "visible" }}>
  <div style={{ width:"600px", height:"300px" }}>
    <ResponsiveContainer>
      {/* 你的Rechart柱状图组件，已开启allowViewBoxEscape */}
    </ResponsiveContainer>
  </div>
</div>

方案2：修复浏览器兼容性问题 #

部分浏览器（比如Chrome）在父元素设置overflowX: scroll时，会忽略overflowY: visible，自动将其转为auto。这种情况下，需要额外加一层包裹容器，把滚动逻辑和图表容器分离：

// 外层仅负责X轴滚动，不限制Y轴
<div style={{ overflowX: "scroll" }}>
  {/* 内层容器不设置overflow，让Tooltip可以溢出 */}
  <div style={{ width:"600px", height:"300px" }}>
    <ResponsiveContainer>
      {/* 你的Rechart柱状图组件，已开启allowViewBoxEscape */}
    </ResponsiveContainer>
  </div>
</div>

关键注意点 #

• 确保Tooltip的allowViewBoxEscape属性确实设为true，这个属性是让Tooltip脱离SVG的 viewBox限制，配合外层DOM的overflow设置才能生效。
• 不要给图表的直接父容器设置overflowY: hidden，否则会再次截断Tooltip。

内容的提问来源于stack exchange，提问作者James