Update line chart with a Vertical Line on Chart.js

Question

I am trying to draw a vertical line on a Multi-Line Chart, but I am having issues with the function not updating the chart unless the mouse is hovering on the a tick of the chart. I have used the answer from another question which the user wanted to add ability to update the tick when hovering. This is the link to the other question:

Moving vertical line when hovering over the chart using chart.js

This is my implementation with my understanding from the above example:

    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
             labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP","OCT", "NOV", "DEC"],
             datasets: [{
                      data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
                       }]
              }
     });

      var lineDraw = Chart.controllers.line.prototype.draw;
      Chart.helpers.extend(Chart.controllers.line.prototype, {
        draw: function() {
          lineDraw.apply(this, arguments);

          var chart = this.chart;
          var ctx = chart.chart.ctx;

          var activePoint = this.chart.tooltip._active[0];
          var ctx = this.chart.ctx;
          var x = myChart.scales["x-axis-0"].getPixelForTick(0);
          var topY = this.chart.scales['y-axis-0'].top;
          var bottomY = this.chart.scales['y-axis-0'].bottom;

         // draw line
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(x, topY);
          ctx.lineTo(x, bottomY);
          ctx.lineWidth = 0.5;
          ctx.strokeStyle = '#eeeeee';
          ctx.stroke();
          ctx.restore();
     }});