zoom and pan on charts in angular

Question

I have a problem on angular ( v5) with this plugin: ng2-charts ( from charts.js) chartjs-plugin-zoom hammer.js

I have a simply chart and i'd like to zoom and pan on this, but it doesn't works.

I upload my code here so you can check... I think I have imported everything I need and I do not understand why it does not go. can you help me?

thank you very much!

Answer 1

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:

• Official hammerjr web site Train here your gestures. At first they're not exactly intuitive if you have a touchpad.
• Official readme.md of charts-plugin-zoom shows the complete syntax for the zoom configuration
• Can ng2-charts work with Chart.js zoom plugin? A discussion on how to use the zoom plugin.