Highcharts提示框空间不足：如何仅显示悬浮系列提示框或拓展空间？

方案一：仅显示当前悬浮系列的提示框 #

如果当前配置了tooltip.shared: true（这是触发“显示所有系列提示框”的核心设置），只需将该属性改为false，即可恢复默认的单系列提示框逻辑：

Highcharts.chart('container', {
  tooltip: {
    shared: false // 关闭多系列共享模式，仅展示当前悬浮的系列数据
  },
  // 其余图表配置项...
});

若需要自定义提示框内容，可通过tooltip.formatter函数精准控制输出，确保只渲染当前悬浮点的信息：

tooltip: {
  formatter: function() {
    return `<b>${this.series.name}</b><br/>${this.x}: ${this.y}`;
  }
}

方案二：拓展图表空间容纳所有提示框 #

1. 调整图表边距 #

通过增大图表的margin属性，为提示框预留足够的显示区域，避免被容器边界截断：

Highcharts.chart('container', {
  chart: {
    margin: [80, 50, 80, 50] // 依次为上、右、下、左的边距，按需增大数值
  },
  tooltip: {
    shared: true // 保留显示所有系列的设置
  },
  // 其余图表配置项...
});

2. 自定义提示框定位 #

如果边距调整后仍有遮挡，可通过tooltip.positioner函数手动控制提示框的显示位置，确保其始终在图表可视范围内：

tooltip: {
  shared: true,
  positioner: function(labelWidth, labelHeight, point) {
    return {
      // 水平方向居中对齐悬浮点，同时避免超出图表左右边界
      x: Math.max(0, Math.min(point.plotX - labelWidth / 2, this.chart.plotWidth - labelWidth)),
      // 垂直方向向上偏移，避免遮挡数据点
      y: point.plotY - labelHeight - 10
    };
  }
}

3. 增大图表容器尺寸 #

直接调整图表所在DOM容器的宽高，或通过chart.width/chart.height属性设置固定尺寸，从根源上提供更大的显示空间：

chart: {
  width: 800, // 自定义图表宽度
  height: 600, // 自定义图表高度
  margin: [50, 50, 50, 50]
}

内容的提问来源于stack exchange，提问作者s.stkvc