Dfyjkt

I have used the example to add a vertical line on my line chart, I took a reference from here https://github.com/chartjs/Chart.js/issues/3803#issuecomment-365450035

Everything works fine until I try to toggle legend option in my line chart and line chart starts to look strange.

Before I click the legend option chart looks like below,

and once I toggle the red color legend option then it looks like below,

Here is my code the only thing I have changed is I have used Dash line instead of the normal line on canvas,

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();
 
 ,
]

The strange thing is that when I hover the mouse over Line Chart it becomes normal but if I move away from the mouse from Chart area then it again starts to look strange.

I'm stuck, Could anyone please suggest?