Ng2-charts: Can ng2-charts work with Chart.js zoom plugin?

[mac10046]

I am trying to add zoom functionality to my chart using the chartjs-plugin-zoom project but I haven't been able to get it working yet.

I added the chartjs-plugin-zoom to my project. I have the zoom property added to my chart config as well.

[rbaumi]

@mac10046: in addition install hammerjs

npm install hammerjs --save

and add to your module:

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

[hambecker]

Is zoom now just a part of chart options after doing what rbaumi just did? Like how do you actually tell your graph to turn its zoomable property on? Because I have inserted that code and there is still no zoom functionality.

[rbaumi]

For me the plugin works ok with ionic 3.4.0 and angular 4.2 (maybe not completly ok but identical as in the available samples on the plugin repository).

@hambecker did you enabled zoom / pan in graph settings? Take a look at the graph settings from one of the available samples: https://github.com/chartjs/chartjs-plugin-zoom/blob/master/samples/zoom.html

[hambecker]

@rbaumi I don't quite understand, so are you using ng2-charts at all in this example? or are you using strictly chartjs and hammerjs?

[rbaumi]

@hambecker I'm using ng2-charts. Check out working graph in one of my my projects: math-diet

app.module.ts - module where I import the libs
diet-viewer.ts - component where I init the chart
diet-viewer.html - template where the graph is displayed

[mac10046]

Thanx rbaumi - it worked like a charm.

[nicscap]

Hello,
sorry if I comment here, but I have the same problem. I think that I import the right things but I'm not able to pan or zoom in to the charts. I upload all my code here. Can you help me? I will leave the code on link, so who will need in the future, will have an example.
thanks

[surenzz]

@nicscap did you figure it out?

[bertoldomarcia]

Hello,
In this sample
[https://stackblitz.com/edit/ng2-charts-select-interval-multitouch]
posted by nicscap.
If you change file path app.module.ts
import { ChartsModule } from 'ng2-charts';
to
import { ChartsModule } from 'ng2-charts/ng2-charts';
it´s works very well.
thanks!!!

[fabiocionini]

Hello, I have some issues building an Ionic 3 app with AOT compiling (--prod flag) and this plugin.
The build fails with errors "Cannot write file [...] because it would overwrite input file" on many .js files.
Can someone give me a hint?