Why Zoom plugin is not working of chart js?

Question

This code creates a line chart using Chart.js to display Nifty PCR COI and Bank Nifty PCR COI data that is being fetched from a Google Sheets spreadsheet. The chart is shown in a canvas element and the data is updated every interval set by setInterval(). The zoom plugin for Chart.js is also being used for zooming in the chart but **Zoom plugin not working i want to zoom with fingers in touch enabled devices ** How can i solve this issue

<html>
  <head>
  </head>
  </body>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7/dist/chartjs-plugin-zoom.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <div id="loader" style="display: flex; justify-content: center; align-items: center; height: 400px; background-color: #f2f2f2">
      <div style="text-align: center; font-size: 2em; font-weight: bold; color: #3e95cd;">Loading...</div>
    </div>
    <canvas id="myChart" width="400" height="400" style="display: none;"></canvas>
    <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    fetch('https://script.googleusercontent.com/macros/echo?user_content_key=r9CiwwP04Rh83CglKNwLbJw3zKlvAIWVj4Yf9a5cT3CPRmlxaBB9bOAMnkFV2os4ee10iaj9S7HNOU5axJWhdXmuYbHPVyWnm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnC4mxGG_R4juVl897H-HHcU5jBSu36oRyKZzBJteCuzXZ2p8eeHkRfjTV-mrMKhBOgim2y6bAoCZpSiZg9-Rh7EUjhE06fNngtz9Jw9Md8uu&lib=MQ0aMrcKwzFLX_7mD1gjcTxV-kV6j6m2N')
    .then(response => response.json())
    .then(data => {
    document.getElementById("loader").style.display = "none";
    document.getElementById("myChart").style.display = "block";
    
    const chartData = {
    labels: data.map(d => d.TimeCOI).reverse(),
    datasets: [
    {
    label: 'Nifty PCR COI',
    data: data.map(d => d.Nifty_PCR_COI).reverse(),
    borderColor: '#3e95cd',
    fill: false,
    lineTension: .3,
    pointRadius: 2,
    pointBackgroundColor: '#3e95cd'
    },{
    label: 'Bank Nifty PCR COI',
    data: data.map(d => d.Bank_Nifty_PCR_COI).reverse(),
    borderColor: '#c65e3e',
    fill: false,
    lineTension: .3,
    pointRadius: 2,
    pointBackgroundColor: '#c65e3e'
    }
    ]
    };
    
    const chartOptions = {
    responsive: false,
    zoom: {
    enabled: true,
    mode: 'x',
    drag: true,
    speed: 0.05
    },
    scales: {
    y: {
    beginAtZero: true,
    position: 'right'
    }
    }
    };
    
    
    const chart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: chartOptions
    });
    
    setInterval(() => {
    fetch('https://script.googleusercontent.com/macros/echo?user_content_key=r9CiwwP04Rh83CglKNwLbJw3zKlvAIWVj4Yf9a5cT3CPRmlxaBB9bOAMnkFV2os4ee10iaj9S7HNOU5axJWhdXmuYbHPVyWnm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnC4mxGG_R4juVl897H-HHcU5jBSu36oRyKZzBJteCuzXZ2p8eeHkRfjTV-mrMKhBOgim2y6bAoCZpSiZg9-Rh7EUjhE06fNngtz9Jw9Md8uu&lib=MQ0aMrcKwzFLX_7mD1gjcTxV-kV6j6m2N')
    .then(response => response.json())
    .then(newData => {
    chart.data.labels = newData.map(d => d.TimeCOI).reverse();
    chart.data.datasets[0].data = newData.map(d => d.Nifty_PCR_COI).reverse();
    chart.data.datasets[1].data = newData.map(d => d.Bank_Nifty_PCR_COI).reverse();
    chart.update();
    });
    }, 1000);
    });
    </script>
    </body>
    </html>

Any one can help me ?

score 0 · Answer 1 · answered Mar 17 '23 at 22:10

It seems to me that your zoom options should be under the key plugins.

See this example for the basic config.

Something like this:

options: {
plugins: {
  zoom: {
    zoom: {
      wheel: {
        enabled: true,
      },
      pinch: {
        enabled: true
      },
      mode: 'xy',
    }
  }
}

Why Zoom plugin is not working of chart js?

1 Answers1