this.chart.getPointDataAtEvent is not a function

Expected behavior When I mouseover a point on my graph, I wanna see the point. Looking at the documentation I need to use the getPointDataEvent, but it's not working.

Actual behavior I wanna see the point data I clicked.

Resources (screenshots, code snippets etc.)

Code in my html

<mdb-card>
    <mdb-card-body>
      <h5 class="card-title">Data</h5>
        <div>
            <canvas mdbChart #chart
                [chartType]="chartType"
                [datasets]="chartDatasetsCPU"
                [labels]="chartLabels"
                [colors]="chartColors"
                [options]="chartOptions"
                [legend]="true"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"
              >
            </canvas>
          </div>
    </mdb-card-body>
  </mdb-card> 

Code in my ts file:

 @ViewChild('chart', {static: false}) chart: BaseChartDirective;
public chartType: string = 'line';
 public chartDatasetsCPU: Array<any> = [
{ data: [55, 49, 30, 21, 36, 65, 60], label: '' },
 { data: [100, 100, 100, 100, 100, 100, 100], label: '' },
 { data: [60, 60, 60, 60, 60, 60, 60], label: '' },];
public chartLabels: Array<any> = ['10/11', '', '12/11', '', '14/11', '', '16/11'];
public chartColors: Array<any> = [
{
  borderColor: 'rgba(163,216,231,1)',
  borderWidth: 2,
},
{
  borderColor: 'rgba(246, 201, 0, 1)',
  borderWidth: 2,
  pointStyle:'line',
  pointBorderWidth:1,
  lineCap: 'square'
 },
{
  borderColor: 'rgba(207,0,15,1)',
  borderWidth: 2,
  pointStyle:'line',
  pointBorderWidth:1
} ];
public chartOptions: any = {
responsive: true,
hover: {
  mode: 'nearest',
  intersec: true,
}};
public chartClicked(e: any): void { 
console.log(this.chart.getPointDataAtEvent(e));}
public chartHovered(e: any): void { 
console.log(this.chart.getPointDataAtEvent(e));}

Any idea how I can get this working?

Kind regards,

Kevin Tahon