How to zoom charts in chart.js using angular 7

Question

I have a line-chart and I want to zoom it but unable to do it. Here is my code

let ctx = document.getElementById('myChart')

let chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [7, 10, 3, 5, 2, 3],
          fill: true,
          backgroundColor: 'orange',
          borderColor: 'green',
          pointBorderColor: 'red',
          pointBackgroundColor: 'red'
        }]
      },
      options: {
        plugins: {
          pan: {
            enabled: true,
            mode: 'x',
            onPan: function () { console.log('I was panned!!!'); }
          },
          zoom: {
            enabled: true,
            drag: true,
            mode: 'x',
            onZoom: function () { console.log('I was zoomed!!!'); }
          },
        },
        responsive: true,
      }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<div class="row">
    <div class="col d-flex justify-content-center">
        <canvas id="myChart" style="max-width:95%;height:300px !important;"></canvas>
    </div>
</div>

I have used the following plugin for zooming

https://github.com/chartjs/chartjs-plugin-zoom#readme

I have also included hammerjs and angular/animations in my project.

Update

Why pan and zoom are unknown to typescript?

// package.json
"chart.js": "^2.7.3",
"chartjs-plugin-zoom": "^0.6.6",

Diffusion

Answer 1

First you need to Run npm install chartjs-plugin-zoom to install with npm then do import chartjs-plugin-zoom in your .ts file and write plugin like this :

    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x'
        },
        zoom: {
          enabled: true,
          mode: 'x'
        }
      }
    },  

Kyoko

Answer 2

The zoom options should be configured under the options not options.plugins setting.

  options: {
    pan: {
      enabled: true,
      mode: 'x',     
    },
    zoom: {
      enabled: true,         
      mode: 'x',     
    },
    responsive: true
  }

See this fiddle -> http://jsfiddle.net/3sx8zon2/2/

Aerosphere

but in typescript, it's giving compilation error as there are no pan or zoom properties – Diffusion

and where you have imported the zoom-plugin? – Diffusion

It's in the sources of the fiddle. See if you have referenced the library correctly. And in the code shown by you are setting pan and zoom under plugins which is incorrect, it should be under options – Aerosphere

is typescript giving wrong compilation error? because in options there are no pan or zoom options – Diffusion

I have tested and it is working. Why pan and zoom are unknown to options in typescript? – Diffusion

It has been updated since your answer. It will now work inside zoom attribute inside the plugins – Nickelous

Answer 3

Install chart.js and chartjs-plugin-zoom

npm i chart.js -s
npm i chartjs-plugin-zoom -s

In Component.ts file import Chart and chartjs-plugin-zoom

import { Chart } from 'chart.js';
import 'chartjs-plugin-zoom';

Logic to load chart

let myChart = new Chart('mapId', {
type: 'bar',
data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
},
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'xy'
        },
        zoom: {
          enabled: true,
          mode: 'xy'
        }
      }
    }
  }
});
myChart.render();

In Component.html

<canvas id="mapId"></canvas>

Flaky

this example works well with [email protected] and it is important to note that the 'plugins' ... section is put inside 'options' section. I missed this from the plugin documentation. – Higinbotham

Answer 4

I had used and work fine (Angular 12 - Chartjs 3.5.0):
1.

npm i chart.js -s
npm i chartjs-plugin-zoom -s

.2

import 'hammerjs';
import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);

render: Chart;
this.render = new Chart(ctx, {type: 'line',
  data: {
    labels: xxxxxxxx,
    datasets: [
    ......
  ]
  },
  options: {
    responsive: true,
    interaction: {
      mode: 'index',
      intersect: false,
    },
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true
          },
          mode: 'xy',
        },
        pan: {
          enabled: true,
          mode: 'xy',
        },
      }
    }
  },

}

Tarpeia