How can I use chartjs-plugin-zoom with ng2-charts?

[micobarac]

I tried adding dependencies to polyfills.ts:

import 'chart.js';
import 'hammerjs';
import 'chartjs-plugin-zoom';

Then, I initiated a chart in Angular:

    // Initiate chart
    this.chart = new Chart(this.chartRef);
    this.chart.chartType = 'line';
    this.chart.chartLegend = true;

    this.chart.chartOptions = {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        position: 'left',
        text: this.translateService.get('Performance.ChartTitle')
      },
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true
            }
          }
        ]
      },
      plugins: {
        zoom: {
          pan: {
            enabled: true,
            mode: 'x',
            speed: 10,
            threshold: 10
          }
        }
      }
    };

But, when I try panning the chart, I get the tons of these errors:

I tried adding plugins property to the chart:

import * as zoom from 'chartjs-plugin-zoom';

this.chart.chartPlugins = [zoom];

Then in HTML:

    <canvas #chartRef baseChart [datasets]="chart.chartData" [labels]="chart.chartDataLabels"
      [options]="chart.chartOptions" [plugins]="chart.chartPlugins" [legend]="chart.chartLegend"
      [chartType]="chart.chartType" (chartHover)="chart.onChartHover($event)"
      (chartClick)="chart.onChartClick($event)"></canvas>

But, it looks like the zoom plugin cannot get the required plugin options and the errors remain.

[kamleshpawar2006]

Hi.. Have you got any solution of this?