title: Chartjs / ng2-charts line on hover does not work
body: <p>I'm trying to optimize my chart using ng2-charts on Angular cli app. In general, everything works just fine, the only thing does not is the line on hover to track the data point. This is the ideal chart model I try to make and I also tried to follow its code: </p>
  
  <p><a href="https://stackblitz.com/edit/line-chart?file=app%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/line-chart?file=app%2Fapp.component.ts</a></p>
  
  <p>However, when I hover on my chart, only the tooltip is shown.</p>
  
  <p>Here are my codes:</p>
  
  <p>plugin-hoverline.ts: (copy &amp; paste from the link below, credit by @GRUNT)</p>
  
  <p><a href="https://istack.000webhostapp.com/chartjs-plugin-hoverline.js" rel="nofollow noreferrer">https://istack.000webhostapp.com/chartjs-plugin-hoverline.js</a></p>
  
  <p>banner.component.ts: (chart component)</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HistoricalBpiService } from '../../services/historical-bpi.service';
  import './plugin-hoverline';
  
  @Component({
    selector: 'app-banner',
    templateUrl: './banner.component.html',
    styleUrls: ['./banner.component.scss']
  })
  export class BannerComponent implements OnInit {
  
    currentDate:string = new Date().toJSON().slice(0,10).replace(/-/g,'-');
  
    private dataUrl: string = 'historical/close.json?start=2013-09-01&amp;end=' + this.currentDate;
  
    constructor(    
      private historicalBpiService:HistoricalBpiService
    ) {}
  
    // lineChart
  
    public lineChartData:any = [
      { data:[], label: 'BTC' }
    ];
  
    public lineChartLabels:Array&lt;any&gt; = [];
  
    public lineChartOptions:any = {
      responsive: true,
      maintainAspectRatio: false,
      layout: {
        padding: 0
      },
      lineOnHover: {
       enabled: true,
       lineColor: '#bbb',
       lineWidth: 1
     },
      scales: {
        yAxes: [{
          display: false,
          scaleLabel: {
            display: false,
            labelString: 'USD'
          },
          ticks: {
            //min: 0,
            //max: 5000,
            stepSize: 500,
            display: false,
            mirror: true,
            labelOffset: 7,
            padding: -10,
            callback: function(value, index, values) {
              return '$' + value;
            }
          },
          gridLines: {
            display: true,
            tickMarkLength: 0
          }
        }],
        xAxes: [{
          ticks: {
            display: false,
            mirror: true
          },
          gridLines: {
            display: false,
            tickMarkLength: 0
          }
        }]
      },
      elements: {
        point: {
          radius: 0
        },
        line: {
          tension: 0, // 0 disables bezier curves
        }
      },
      hover: {
        mode: 'nearest',
        intersect: false
      },
      tooltips: {
        mode: 'nearest',
        intersect: false,
        backgroundColor: 'rgb(95,22,21)',
        callbacks: {
          title: function (tooltipItems, data) {
            return (tooltipItems[0] || {})['xLabel'];
          },
          label: function (tooltipItem, data) {
            return '$ ' + tooltipItem.yLabel.toLocaleString();
          },
          labelColor: function(tooltipItem, chart) {
            let dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
            return {
              backgroundColor : dataset.backgroundColor
            }
          }
        }
      }
    };
    public lineChartColors:Array&lt;any&gt; = [
      {
        backgroundColor: 'rgba(199,32,48,0.9',
        borderColor: 'rgb(95,22,21);',
        pointBackgroundColor: 'rgba(218,208,163,0.9)',
        pointHoverBackgroundColor: 'rgba(218,208,163,0.9)',
        pointHoverBorderColor: 'rgb(218,208,163)',
        pointHoverRadius: 5,
        steppedLine: false
  
      }
    ];
    public lineChartLegend:boolean = false;
    public lineChartType:string = 'line';
  
  
    // events
    public chartClicked(e:any):void {
      console.log(e);
    }
  
    public chartHovered(e:any):void {
      console.log(e);
    }
  
    ngOnInit(){
      this.historicalBpiService.getBpiData(this.dataUrl)
        .subscribe(
          res =&gt; {
            //this.lineChartData = Object.keys(res.bpi).map(function (key) { return res.bpi[key];});
            this.lineChartData[0].data = Object.values(res.bpi);
            this.lineChartLabels = Object.keys(res.bpi);
            //console.log(this.lineChartData,this.lineChartLabels);
          }
        )
    }
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;div class="chart"&gt;
        &lt;canvas baseChart height="360px"
          [datasets]="lineChartData"
          [labels]="lineChartLabels"
          [options]="lineChartOptions"
          [colors]="lineChartColors"
          [legend]="lineChartLegend"
          [chartType]="lineChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  </code></pre>