Chart.js垂直线条z-index调整：将悬停线条置于数据点下方

首先明确：这条悬停触发的垂直线是具备可调整的层级属性的，不过具体的定位和调整方式分两种情况，取决于你是用Chart.js内置的交互线，还是通过Annotation插件实现的垂直线：

情况1：使用Chart.js内置的交互十字线（悬停时自动显示） #

如果你的垂直线是Chart.js在开启interaction.mode: 'index'或'nearest'时自动生成的交叉线，它的DOM元素默认层级会高于数据点。要调整它的z-index，你可以通过Chart.js的onHover回调来获取该元素并修改：

1. 在配置中添加悬停回调，定位到垂直线元素并修改层级：

options: {
  interaction: {
    mode: 'index',
    intersect: false,
    axis: 'x'
  },
  onHover: function(event, chartElements) {
    // 通过浏览器开发者工具可确认垂直线的类名，不同版本可能略有差异
    const verticalLines = document.querySelectorAll('.chartjs-crosshair-line.x-axis');
    if (chartElements.length) {
      // 设置z-index小于数据点默认值（通常为2），让线条在后方
      verticalLines.forEach(line => line.style.zIndex = '1');
    } else {
      // 无悬停时重置层级（可选）
      verticalLines.forEach(line => line.style.zIndex = '');
    }
  }
}

小提示：可以用浏览器F12元素面板，悬停时找到垂直线DOM元素，确认它的类名是否和示例一致。

情况2：使用Chart.js Annotation Plugin实现的动态垂直线 #

如果你是通过chartjs-plugin-annotation插件实现的悬停垂直线，配置会更直接——插件原生支持设置zIndex属性：

1. 在注释配置中直接给垂直线添加层级设置，确保值低于数据点的默认层级（通常为2）：

options: {
  plugins: {
    annotation: {
      annotations: {
        hoverVerticalLine: {
          type: 'line',
          xMin: null,
          xMax: null,
          borderColor: 'rgba(0,0,0,0.2)',
          borderWidth: 1,
          zIndex: 1, // 关键配置：让线条置于数据点后方
        }
      }
    }
  },
  onHover: function(event, chartElements) {
    // 悬停时更新垂直线位置
    if (chartElements.length) {
      const xValue = chartElements[0].parsed.x;
      this.options.plugins.annotation.annotations.hoverVerticalLine.xMin = xValue;
      this.options.plugins.annotation.annotations.hoverVerticalLine.xMax = xValue;
      this.update();
    } else {
      // 无悬停时隐藏线条
      this.options.plugins.annotation.annotations.hoverVerticalLine.xMin = null;
      this.options.plugins.annotation.annotations.hoverVerticalLine.xMax = null;
      this.update();
    }
  }
}

这种方式无需直接操作DOM，是更可靠的原生解决方案。

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