一种可能的解决方法是使用minX和maxX属性来设置X轴可见的最小值和最大值，以确保缩放时图表的可见部分不会超出范围。

例如：

options: {
  chart: {
    zoom: {
      enabled: true
    }
  },
  xaxis: {
    type: 'datetime',
    minX: new Date('2021-01-01').getTime(),
    maxX: new Date('2021-12-31').getTime()
  }
}

在上面的示例中，使用minX和maxX属性限制了X轴的范围，以便在缩放时图表只能显示在指定的开始和结束日期之间的数据。

另一个可能的解决方法是使用zoomed事件来监控缩放事件，并对X轴进行手动缩放。

例如：

chart.on('zoomed', function({xaxis}) {
  const [minX, maxX] = xaxis.get('minMax')

  if (minX !== null && maxX !== null) {
    xaxis.options.min = minX
    xaxis.options.max = maxX
  }
})

在上面的示例中，我们使用chart.on()函数来监听缩放事件，然后手动更新X轴的min和max属性。

请注意，这两种方法可能需要根据您的具体情况进行调整和优化。