Apexcharts设置intersect为true时数据点hover不显示tooltip问题问询

问题根因 #

该异常由两个配置缺失导致：

• line系列默认marker的悬浮检测范围过小，intersect: true要求精确命中数据点，极小的触发范围导致几乎无法触发悬浮事件
• 未指定chart的悬浮触发模式为点触发，和intersect配置不匹配

解决步骤 #

1. 新增marker配置，扩大悬浮检测范围 #

在根配置项中添加markers配置，如果你不想默认展示所有数据点的marker，可以将常态size设为0，仅放大悬浮检测范围：

var options = {
  // 原有其他配置保持不变
  markers: {
    size: 0, // 常态不显示marker，需要默认显示可调整为4左右
    hover: {
      size: 5,
      sizeOffset: 4 // 悬浮检测的偏移半径，数值越大越容易命中数据点
    }
  }
}

2. 新增chart.hover配置，指定触发模式为点触发 #

修改原有的chart配置：

chart: {
  id: 'Chart',
  zoom: {
    enabled: false
  },
  // 新增以下配置
  hover: {
    mode: 'point'
  }
}

3. 可选：排查自定义tooltip样式问题 #

如果修改上述配置后仍看不到tooltip，先临时注释掉tooltip.custom配置，测试默认tooltip是否能正常触发。如果默认tooltip可以展示，说明你自定义的HTML缺少基础样式（比如你使用了Tailwind类名但项目未引入Tailwind，导致tooltip背景透明不可见），可以给自定义HTML添加内联样式解决：

custom({ series, dataPointIndex, w }) {
  const date = w.config.xaxis.categories[dataPointIndex];
  return `<div style="padding: 8px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px;">
          <p style="font-weight: bold; margin: 0;">${date}</p>
          </div>`;
}

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