Search code examples
angularchart.jshammer.jsng2-charts

zoom and pan on charts in angular

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!

Solution

  • 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: