How to convert this V1.0 Line Extend function to 2.0?

Hello,

I came across a function in Stack Overflow that allows me to draw a vertical line at any axis I want. However, it was written for v1.0 and no longer works for 2.0. If I use it with the newer version I get this error:

Cannot read property ‘extend’ of undefined.

Can anyone assist me in converting the syntax so that it is compatible with version 2.0?

Here is the function:

Chart.types.Line.extend({
    name: "LineWithLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);
        
        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(point.x, point.y);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(point.x, scale.endPoint);
        this.chart.ctx.stroke();
        
        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
    }
});

Here is a JSFiddle that uses it: http://jsfiddle.net/dbyze2ga/14/

Here is a JsFiddle with 2.0 that I’m trying to get the function to work on: https://jsfiddle.net/L5069q3j/

Any help would be appreciated!

[potatopeelings]

You can use the Chart Annotation plugin (https://github.com/chartjs/chartjs-plugin-annotation)

Fiddle - https://codepen.io/anon/pen/ZywgKr

var ctx = document.getElementById("canvas").getContext("2d");
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]
        }
      ]
    },
    options: {
      annotation: {
        annotations: [
          {
            type: "line",
            mode: "vertical",
            scaleID: "x-axis-0",
            value: "MAR",
            borderColor: "red",
            label: {
              content: "TODAY",
              enabled: true,
              position: "top"
            }
          }
        ]
      }
    }
  }
);

[kurkle]

https://github.com/abelheinsbroek/chartjs-plugin-crosshair