Using chartjs-plugin-zoom with angular ng2-charts

[alfabetagama]

When using zoom plugin with angular ng2 charts, you have to explicitly set wheel.speed and pan.threshold for pan and wheel zoom to work. If those are not set in plugin options those functions won't work.
ng2-charts 3.0.8
chart.js 3.0.3

This works:

zoom: {
    zoom: {
        wheel: {
            enabled: true,
            speed: 0.3,
        },
        pinch: {
            enabled: true,
        },
        drag: {
            enabled: false,
        },
        mode: 'x',
    },
    pan: {
        enabled: true,
        threshold: 10,
        modifierKey: null,
        mode: 'x',
    },
},

[LeeLenaleee]

@alfabetagama do you have a reproducable sample for this because it seems to work fine, although there is no version 3.0.3 of chart.js I tested it with 3.0.2 and the latest 3.7.0 and they both work. So if it doesnt work please provide a working sample:

https://codesandbox.io/s/ng2charts-chart-js-issue-template-forked-ggoq7

[alfabetagama]

It is really not an issue. I think it is an ng2-charts problem, seems like zoom plugin is initialized without default options. I posted this if someone has the same issue.

[LeeLenaleee]

No ng2-charts doesnt need to initialise anything, the defaults are being defined here in the plugin itself: https://github.com/chartjs/chartjs-plugin-zoom/blob/master/src/plugin.js#L14-L36 so the line you linked with the speed will use a default of 0.1 if nothing has been provided by the user.

But as you can see in my sandbox it also works fine barebone with ng2charts so the issue lies somewhere with you so without a reproducable sample there is no way we can help you

[kurkle]

The defaults are applied when the plugin is registered. I'm guessing that part is missing.

[johnny5th]

I'm also having this problem with svelte-chartjs. There's not a global registration step, so that could be the problem.

[tbtommyb]

I've had a similar issue with react-chartjs-2. In my case using the 'lazy' module import method, rather than pulling in everything and registering manually, meant that this plugin wasn't registered.

Setting these properties manually did fix the immediate issue but I suppose the proper fix is to import the various components and register the plugin.