Add Zoom Event Handler To Charts For Chartjs With Chartjs-plugin-zoom

chartjs-plugin-zoom is a zoom and pan plugin for Chart.js You can call chart.resetZoom() to programmatically resets the zoom to the default state. See this example on jsfiddle. HTM

Solution 1:

Unfortunately, you can not add mouse scroll event to the chart, as the chartjs-plugin-zoom will prevent that by default.

However, you can use the following chart plugin, which will get the job done for you ...

plugins: [{
   beforeDraw: function(c) {
      var reset_zoom = document.getElementById("reset_zoom"); //reset buttonvar ticks = c.scales['x-axis-0'].ticks.length; //x-axis ticks arrayvar labels = c.data.labels.length; //labels arrayif (ticks < labels) reset_zoom.hidden = false;
      else reset_zoom.hidden = true;
   }
}]

add this plugin followed by your chart options.

Basically, the way chartjs-plugin-zoom works is, it removes/adds elements from/to the ticks array on mouse scroll, and the above plugin will check for that, henceforth show / hide the rest zoom button accordingly.

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var ctx = document.getElementById("myChart");
var myChart = newChart(ctx, {
   type: 'bar',
   data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
         label: '# of Votes',
         data: [12, 19, 3, 5, 2, 3]
      }]
   },
   options: {
      pan: {
         enabled: true,
         mode: 'x',
      },
      zoom: {
         enabled: true,
         mode: 'x',
      }
   },
   plugins: [{
      beforeDraw: function(c) {
         var reset_zoom = document.getElementById("reset_zoom"); //reset buttonvar ticks = c.scales['x-axis-0'].ticks.length; //x-axis ticks arrayvar labels = c.data.labels.length; //labels arrayif (ticks < labels) reset_zoom.hidden = false;
         else reset_zoom.hidden = true;
      }
   }]
});

$('#reset_zoom').click(function() {
   myChart.resetZoom();
});

.myChartDiv {
   max-width: 600px;
   max-height: 400px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script><scriptsrc="https://npmcdn.com/Chart.Zoom.js@0.3.0/Chart.Zoom.min.js"></script><divclass="myChartDiv"><canvasid="myChart"width="600"height="400"></canvas></div><buttonid="reset_zoom"hidden>
   Reset zoom
</button>

Solution 2:

Another approach to this is to use the zoom plugin onZoomComplete event.

First, you should apply a style to the zoom button that will have it hidden by default.

.reset-zoom {
    display: none;
}

and the button

<button id="reset_zoom" class="reset-zoom">
    Reset zoom
</button>

Then on the chart's zoom options you should add

zoom: {
   enabled: true,
   mode: 'x',
   onZoomComplete: function(myChart) {
         $('#reset_zoom').show();
   }
}

And in order to hide the zoom button again once a resetZoom is called you could add

$('#reset_zoom').click(function(){
    myChart.resetZoom(); 
    $('#reset_zoom').hide();
});

So each time you zoom in the reset zoom button is displayed and once you reset the zoom it is hidden again.