When drag zoom is enabled, scroll zooming is blocked

[gornad]

I am new to this plugin. When adding drag: true, that disables scroll zooming. Is it not possible to have scroll zooming and drag zooming at the same time? This can be tested by simply adding drag: true to this http://jsfiddle.net/jyougo/sv2n4zdh/

[benmccann]

I would be open to a PR to allow both at the same time

[mshariq-nerd]

@gornad @benmccann Any solution for this? I am also looking for the same functionality. Any workaround?

[gornad]

Line 414 (ADDED && event.which === 3):
if (chartInstance.$zoom._options.zoom && chartInstance.$zoom._options.zoom.drag && event.which === 3) {

Line 469 (CHANGED FROM (dragDistanceX > 0 || dragDistanceY > 0)):
if (dragDistanceX > 5 && dragDistanceY > 0) {

Line 480 (CHANGED FROM !(chartInstance.$zoom._options.zoom && chartInstance.$zoom._options.zoom.drag)):
if (chartInstance.$zoom._options.zoom) {

These are the changes I made in the library. I didn't make a pull request because I don't know how to properly contribute to open-source projects on github. Feel free to take these changes and merge them yourself.

[benmccann]

Right now there's just a single option drag which enables drag and disables scroll. I agree it would make sense to be able to control these separately. We would also need a new user option added to control the scroll in that case. I would be open to a PR to add such a feature

[jledentu]

@benmccann What would you think about a such configuration?

zoom: {
    // Boolean to enable zooming
    enabled: true,

    interaction: ['scroll', 'drag'], // Enable zoom by scroll, or drag, or both

    // Drag-to-zoom effect can be customized
    dragOptions: {
        borderColor: 'rgba(225,225,225,0.3)'
        borderWidth: 5,
        backgroundColor: 'rgb(225,225,225)',
        animationDuration: 0
    },

    // Scroll can be customized
    scrollOptions: {
        // Speed of zoom via mouse wheel
        // (percentage of zoom on a wheel event)
        speed: 0.1,
    }

    // Zooming directions. Remove the appropriate direction to disable
    // Eg. 'y' would only allow zooming in the y direction
    // A function that is called as the user is zooming and returns the
    // available directions can also be used:
    //   mode: function({ chart }) {
    //     return 'xy';
    //   },
    mode: 'xy',

    rangeMin: {
        // Format of min zoom range depends on scale type
        x: null,
        y: null
    },
    rangeMax: {
        // Format of max zoom range depends on scale type
        x: null,
        y: null
    },

    // Function called while the user is zooming
    onZoom: function({chart}) { console.log(`I'm zooming!!!`); },
    // Function called once zooming is completed
    onZoomComplete: function({chart}) { console.log(`I was zoomed!!!`); }
}

[benmccann]

Maybe we could combine enabled and interaction? E.g.

    enabled: ['scroll', 'drag'],

Or

    enabled: false,

[jledentu]

That's a good idea though I'm not used that a enabled property have a different type than boolean.