ChartJS：单击图例选项会使折线​​图难看

Question

我已使用示例在折线图上添加垂直线，我从此处引用了https://github.com/chartjs/Chart.js/issues/3803#issuecomment-365450035

一切正常，直到我尝试在折线图中切换图例选项并且折线图开始看起来很奇怪。

在我单击图例选项图如下图之前，

，一旦我切换了红色图例选项，则如下图所示，

这是我的代码，唯一更改的是我使用了Dash行而不是画布上的普通行，

plugins: [{
  beforeEvent: function(chart, e) {
    if ((e.type === 'mousemove')
      && (e.x >= e.chart.chartArea.left)
      && (e.x <= e.chart.chartArea.right)
    ) {
      chart.options.customLinePlugin.x = e.x;
    }
  },
  afterDraw: function(chart, easing) {
    let ctx = chart.chart.ctx;
    let chartArea = chart.chartArea;
    let mainCanvas = chart.canvas;
    let pluginObj = chart.options.customLinePlugin;
    let x = pluginObj.x;

    if (!isNaN(x)) {
      ctx.save();
      ctx.setLineDash([4, 3]);
      ctx.strokeStyle = chart.options.customLinePlugin.color;
      ctx.moveTo(chart.options.customLinePlugin.x, chartArea.bottom);
      ctx.lineTo(chart.options.customLinePlugin.x, chartArea.top);
      ctx.stroke();
      ctx.restore();
    }
  },
}]

奇怪的是，当我将鼠标悬停在“折线图”上时，它变为正常状态，但是如果我从“图表”区域移开鼠标，则它又开始看起来很奇怪。

我被困住了，有人可以建议吗？