[Chartjs]-How to zoom charts in chart.js using angular 7

by

9👍

✅

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'
        }
      }
    },

6👍

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/

5👍

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>

1👍

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',
        },
      }
    }
  },

}

Leave a comment