Highcharts图表首个数据点Tooltip缺失问题咨询

问题原因 #

Highcharts默认对数据点的悬停热区有绘图区边界裁剪逻辑，当你的图表无margin对齐、首个数据点刚好贴在x轴左侧边界时，该数据点的热区会有一半甚至全部被裁剪到绘图区外，鼠标无法正常识别悬停动作，因此Tooltip无法触发。你缩小图表尺寸时，x轴的padding会自动调整，数据点与左边界产生空隙，热区恢复完整，Tooltip就能正常显示。

解决方案 #

你可以根据自己的业务需求选择以下任意一种方案：

• 给图表左右预留少量内边距，避免数据点直接贴边：
  配置chart.margin参数，示例代码：

  chart: {
    margin: [0, 8, 0, 8] // 上、右、下、左四个方向的边距，可根据需求调整数值
  }
  

• 增大数据点的悬停检测阈值，扩大热区识别范围：
  配置系列的hitTest阈值，示例代码：

  plotOptions: {
    series: {
      stickyTracking: true,
      point: {
        hitTest: {
          threshold: 12 // 鼠标距离数据点12像素即可触发悬停，数值可自定义
        }
      }
    }
  }
  

• 调整x轴的边距参数，让首尾数据点和轴边界自动预留空隙：
  配置x轴的minPadding和maxPadding，示例代码：

  xAxis: {
    minPadding: 0.02, // 轴起始位置和首个数据点之间预留2%的轴长度空隙
    maxPadding: 0.02 // 轴结束位置和末尾数据点之间预留2%的轴长度空隙
  }
  

• 禁用Tooltip的容器边界限制：
  配置Tooltip的outside参数，让Tooltip脱离图表容器的裁剪限制，示例代码：

  tooltip: {
    outside: true
  }
  

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