title: Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
body: <p><a href="https://github.com/chartjs/chartjs-plugin-zoom" rel="noreferrer">chartjs-plugin-zoom</a> is a zoom and pan plugin for <a href="https://github.com/chartjs" rel="noreferrer">Chart.js</a></p>
  
  <p>You can call chart.resetZoom() to programmatically resets the zoom to the default state. See <a href="https://jsfiddle.net/jyougo/hyyw0cyb/" rel="noreferrer">this example on jsfiddle</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="myChartDiv"&gt;
      &lt;canvas id="myChart" width="600" height="400"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;button id="reset_zoom"&gt;
      Reset zoom
  &lt;/button&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var ctx = document.getElementById("myChart");
  var myChart = new Chart(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',
          }
      }
  });
  
  $('#reset_zoom').click(function(){
      myChart.resetZoom();
  });
  </code></pre>
  
  <p>And it looks like:<a href="https://i.stack.imgur.com/bKZB8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bKZB8.png" alt="enter image description here"></a></p>
  
  <p>However, I don't want to show the Reset zoom button in the first place. Instead, I would like to hide it first, and then listen for a zoom event (In chartjs-plugin-zoom the event is mouse wheel and pinch for touch screens) to show it.</p>
  
  <p>So the question is, is there a way in chartjs with chartjs-plugin-zoom to add a zoom event handler (wheel and pinch events) to a chart? Thanks.</p>