Pan & Zoom-Drag

[neon-dev]

Currently it is not possible to enable pan and zoom.drag (selection zoom) in the same chart. Well, technically it is, but not from a usability standpoint because both are triggered simultaneously.
I'd suggest to make the key events configurable and implement Ctrl + Left mouse for panning as the default if both options are enabled at the same time. For mobile users, you'd need to change it to a hold-then-move gesture or something similar. Alternatively maybe the chart area could get separate trigger regions. Like pan inside the graph and zoom.drag outside the graph.

[JannemanDev]

I experienced this as well. When you try to pan (with LMB) it also drag-to-zoom's. Simple solution would be to use different mousekey for drag zoom. For example RMB to drag zoom would fix it:

chartInstance.zoom._mouseDownHandler = function(event) {
        if (event.which==3)
          chartInstance.zoom._dragZoomStart = event;
};

I would rather see the more common binding where LMB is drag-zoom and RMB is panning. But since Hammer is mandatory(!) for panning, this library can only detect left mouse clicks on no-touch devices. See hammerjs/hammer.js#391 and #133

For mobile you don't have to change anything. It just works. Panning is done with pan gesture (using a finger to touch-hold and move left right) and zooming by pinch gesture. I also added double tapping. Btw I am using latest fork of VictorJuliani 26 june 2018.
Double tapping is easy implemented with Hammer:

mc.add(new Hammer.Tap({
        event: 'doubletap',
        taps: 2
}));

mc.on('doubletap',function(e) {
        doZoom(chartInstance, 1.1, e.center);
        // Prevent the event from triggering the default behavior (if any??)
        e.preventDefault();
});

[Robiig]

Hi !

I'm trying to apply the workaround but is's difficult with ng2-chart.

Is there now a better way to enable pan and zoom.drag in the same chart ?

Ctrl + Left mouse for panning would be nice..