ZingChart: Allow mouse wheel zooming on any chart!

Mouse wheel zooming come standard to any map type chart but we can apply them to any chart with a simple piece of code! But first, be sure to enable zooming the axis' that we choose. In this case I will enable zooming on scale X and scale Y like so:

 scaleY:{
   zooming:true
 },
 scaleX:{
   zooming:true
 },

Now we can apply our mouse wheel zooming function to the chart. Lets place this right above our render method:

zingchart.bind('myChart', 'mousewheel', function(p) {
    if (p.ev.wheelDelta > 0) {
        zingchart.exec(p.id, 'zoomin');    
    } else if (p.ev.wheelDelta < 0) {
        zingchart.exec(p.id, 'zoomout');    
    }
});

As you can see myChart is our chart ID and we use the zoomin and zoomout zingchart methods to zoom the chart depending on if the scroll event is positive or negative.

Here is the function in action:

ZingChart: Allow mouse wheel zooming on any chart!

Demo