как использовать chartjs-plugin-crosshair в Angular 6+?

Question

Я использовал ChartJs в своем проекте angular 6+, но chartjs-plugin-crosshair не работает, когда я его использую. Я использую ChartJs 2.8.0.

Здесь находится ts-файл графика.

Большое спасибо.

import { Component, OnInit } from '@angular/core';
import { Chart } from 'Chart.js';

@Component({
    selector: 'my-app',
    template:`
        <div>
        <canvas id="myChart" width="600" height="400"></canvas>
    </div>
    `,
    styleUrls: ['./line-custom-tooltips.component.scss']
})
export class LineCustomTooltipsComponent implements OnInit {

    lineChart: Chart;
    ctx: any;

    ngOnInit() {
        this.drawMyChart();
    }

    drawChart() {
        this.lineChart = document.getElementById("myChart");
        this.ctx = this.lineChart.getContext("2d");
        this.lineChart = new Chart(this.ctx, {
            type: "scatter",
            options: {
                plugins: {
                    crosshair: {
                        sync: {
                            enabled: false
                        }
                    }
                },

                tooltips: {
                    mode: "interpolate",
                    intersect: false,
                    callbacks: {
                        title: function (a, d) {
                            return a[0].xLabel.toFixed(2);
                        },
                        label: function (i, d) {
                            return (
                                d.datasets[i.datasetIndex].label + ": " + i.yLabel.toFixed(2)
                            );
                        }
                    }
                }
            },
            data: {
                datasets: [
                    this.generateDataset(0, "A", "red"),
                    this.generateDataset(1, "B", "green"),
                    this.generateDataset(2, "C", "blue")
                ]
            }
        });
    }

    drawMyChart() {
        this.lineChart = document.getElementById("myChart");
        this.ctx = this.lineChart.getContext("2d");
        var myChart = new Chart(this.ctx, {
            type: 'line',
            data: {
                labels: ['A', 'B', 'C', 'D', 'E'],
                datasets: [
                    this.generateDataset(0, "A", "red"),
                    this.generateDataset(1, "B", "green")
                ]
            },
            options: {
                scales: {
                    xAxes: [{
                        display: true,
                        type: 'linear',
                        position: 'bottom',
                        id: 'x-axis-0',
                        ticks: {
                            source: 'labels'
                        }
                    }]
                },
                tooltips: {
                    mode: "interpolate",
                    intersect: false,
                    callbacks: {
                        title: function (a, d) {
                            // return a[0].xLabel.toFixed(2);
                            return a[0].xLabel;
                        },
                        label: function (i, d) {
                            return (
                                d.datasets[i.datasetIndex].label + ": " + i.yLabel.toFixed(2)
                            );
                        }
                    }
                },
                plugins: {
                    crosshair: {
                        sync: {
                            enabled: false
                        }
                    }
                }
            }
        });
    }

    generateDataset(shift, label, color) {
        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        let data = [];
        let index = 0;

        while (index < 5) {
            data.push({
                x: index,
                y: getRandomInt(10, 40)
            });
            index++;
        }

        var dataset = {
            backgroundColor: color,
            borderColor: color,
            showLine: true,
            fill: false,
            pointRadius: 2,
            label: label,
            data: data,
            lineTension: 0,
            interpolate: true,
            xAxisID: 'x-axis-0'
        };
        return dataset;
    }

}