Chart.js - annotation Vertical line moves with mouse in Angular 6

Question

how can add Vertical line moves with mouse, Angular 6

canvas.onmousemove = function (evt) {
    var points = myChart.getElementsAtXAxis(evt);
    annotation.annotations[0].value = new Date(myChart.config.data.labels[points[0]._index]);
    myChart.update();

it not work on angular version, how can change Annotation value dynamic

I want move this line enter image description here

Answer 1

canvas.onmousemove = (evt) => {

        docCountChart.update();

        var x = evt.pageX - canvas.offsetLeft - 30;

        context.beginPath();

        context.moveTo(x, 32);
        context.lineTo(x, 407);
        context.strokeStyle = 'gray';
        context.stroke();
        context.closePath();
    };