[Chartjs]-Zoom and pan on charts in angular

by

5👍

✅

To have functional Pan and Zoom on your ng2-charts, this is what you need to do:

  1. Use npm to install the dependencies: hammerjs and chartjs-plugin-zoom
  2. Import the dependencies to your module.
  3. Add the pan and zoom configurations in the plugin section of the chart configuration.
  4. Horizontal zoom and pan only works with scatter charts

It is easier said than done so, before adding zoom and pan, be sure that you have a working ng2-chart in your project. Otherwise you never know what’s going wrong.

1. Install the required plugins

Execute the following commands in the root folder of your project:

   npm install hammerjs
   npm install charts-plugin-zoom

2. Import the plugins into your module

After installing the plugins, you can check that these two folders exist:

  • node_modules/hammerjs
  • node_modules/chartjs-plugin-zoom

You need to include them in your module. For example, you can add two imports in app.module.ts:

   import 'hammerjs';
   import 'chartjs-plugin-zoom';

   @NgModule({
     declarations: [
       AppComponent,
       ...
     ]
   }

As you can see, no need to add anything in the declarations or any of the other sections of the @NgModule annotation.

3. Add the zoom options in chart configuration
To setup a chart with ng2-chart you had to create a template with something like the following snippet:

  <canvas baseChart
      chartType="bar"
      [datasets]="dataSets"
      [labels]="labels"
      [options]="options"
      legend="true">
  </canvas>

Add, in the corresponding class, a plugin element with zoom section. Mind the zoom nested twice:

import { ChartDataSets, ChartOptions } from 'chart.js';
...
...
export class YourChartComponent {
  ...
  public options: ChartOptions = {
      legend: {
        ...
      },
      scales: {
         ...
      },
      plugins: {
        zoom: {
          pan: {
            enabled: true,
            mode: 'xy'
          },
          zoom: {
            enabled: true,
            mode: 'xy'
          }
        }
      }
    };
  ...
  ...
}

4. Horizontal pan only works with scatter charts

Typically, the example above will only pan and zoom vertically.

Some links

Credits to where I got the information:

Leave a comment