Recharts自定义tooltip高度超出柱状图时显示背景元素问题求助

解决方案 #

第一步：给自定义tooltip增加不透明背景基础样式 #

首先给.custom-tooltip类添加基础样式，避免默认透明导致透出下层内容：

.custom-tooltip {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding: 10px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 999;
  max-width: 280px;
}

第二步：限制tooltip最大高度，超出部分内部滚动 #

如果tooltip内容过多高度太大，直接限制最大高度，内部加滚动条避免溢出：

.custom-tooltip {
  /* 保留上面的原有样式 */
  max-height: 350px;
  overflow-y: auto;
  /* 可自行添加滚动条美化样式 */
}

第三步：调整Recharts Tooltip组件属性，限制溢出 #

在调用Tooltip组件的位置，添加溢出限制和偏移属性，避免tooltip超出图表可视区域：

import { Tooltip } from 'recharts';

// 柱状图配置里的Tooltip部分修改为
<Tooltip
  content={<CustomTooltip />}
  // 禁止tooltip超出图表的可视区域
  allowEscapeViewBox={{ x: false, y: false }}
  // 距离触发位置的偏移量，避免贴边
  offset={15}
  // 可选：如果需要强制tooltip在柱子下方展示，固定y轴偏移
  // position={{ y: 20 }}
/>

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