Recharts柱状图鼠标悬停缺失默认灰色背景问题求助

问题背景 #

用Recharts构建的柱状图，鼠标悬停柱子时本该同时显示覆盖柱子左右及上方的灰色背景和提示框，但当前场景里只有红色提示框，灰色背景没出来。因为默认Tooltip的数据显示有问题，所以改用了自定义Tooltip，查Recharts BarChart文档得知这个灰色背景是默认自带的。

解决方案 #

这个灰色背景是Tooltip组件的cursor元素，使用自定义Tooltip时默认会被禁用，手动开启并配置样式即可：

修改Tooltip组件 #

在你的<Tooltip>标签中添加cursor属性，配置背景样式：

<Tooltip
  content={<CustomTooltip />}
  cursor={{ fill: '#E0E0E0', opacity: 0.3 }} // 开启灰色背景并设置样式
/>

进阶样式配置（匹配预期效果） #

如果要实现类似预期的全屏横向灰色背景，可以这样配置：

<Tooltip
  content={<CustomTooltip />}
  cursor={{ 
    type: 'rect',
    fill: '#F5F5F5',
    opacity: 0.5,
    width: '100%',
    x: 0
  }}
/>

额外检查 #

确认你的CSS没有覆盖Recharts默认的cursor样式，比如如果有.recharts-tooltip-cursor相关的display: none或样式重置，需要移除或调整。

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