title: Zoom Function For Chart.js
body: <p>I have a chart that I want to use the github zoom feature for found <a href="https://github.com/chartjs/chartjs-plugin-zoom" rel="noreferrer">here</a>.</p>
  <p>I am have wrote the code below which runs error free, but when I try to zoom in and out on my mouse wheel it does not work.</p>
  <p>What code needs to be changed so I can zoom in and out using the mouse wheel?</p>
  <p>See the below snippet</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ctx = document.getElementById('doughnut-chart').getContext('2d');
  
  new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ["Day One", "Day Two", "Day Three", "Day Four", "Day Five"],
        datasets: [
          {
            label: "Agi",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#6bcd3e"],
            data: ["100", "200", "300", "400", "500" ] 
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: "Title"
        }
      },
      pan: {
          enabled: true,
          mode: 'xy'
      },
      zoom: {
          enabled: true,
          mode: 'xy',
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.3"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"&gt;
  &lt;canvas id="doughnut-chart" width="800" height="450"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>EDIT</strong><br>
  As suggested in the comments I added a plugin category and the code now reads like the below - but still zoom function is not working.</p>
  <pre><code>   &lt;script type=&quot;text/javascript&quot;&gt;
     var ctx = document.getElementById('doughnut-chart').getContext('2d');
  
     new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: [&quot;Day One&quot;, &quot;Day Two&quot;, &quot;Day Three&quot;, &quot;Day Four&quot;, &quot;Day Five&quot;],
        datasets: [
          {
            label: &quot;Test&quot;,
            backgroundColor: [&quot;#3e95cd&quot;, &quot;#8e5ea2&quot;,&quot;#3cba9f&quot;,&quot;#e8c3b9&quot;,&quot;#c45850&quot;, &quot;#6bcd3e&quot;],
            data:  [&quot;100&quot;, &quot;200&quot;, &quot;300&quot;, &quot;400&quot;, &quot;500&quot; ] , 
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: &quot;Test&quot;
        },
        plugins: {
              zoom: {
                  pan: {
                      enabled: true,
                      mode: 'x',
                      speed: 10,
                      threshold: 10
                  },
                  zoom: {
                      enabled: true,
                      mode: 'y'
                  }
               }
            }
         }
      });
    &lt;/script&gt;
  </code></pre>