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!

Neoplasty

I got the same problem. Did you solve it? – Blastema

refer this link #54177802 – Mauldin

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.

Hyetograph

Answer 2

For New Version:

Step 1:

npm i ng2-charts
npm i chart.js 
npm i chartjs-plugin-zoom

Step 2:

Import NgChartsModule in App.module.ts file

Step 3: To add zoom option , import these in App.component.ts and register the chart

import { Chart } from 'chart.js';
import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);

Step 4: Add zoom plugin configuration in options

plugins: {
      zoom: {       
        pan: {
          enabled: true
        },
        zoom: {
          wheel: {
            enabled: true,
          },

          pinch: {
            enabled: true
          },
        }
      }
    }

Reference: https://medium.com/@mohnish1997/angular-ng2-charts-zoom-5f039f0cc95a

Davina