Won't able to zoom after including chartjszoom in chartjs

Question

Failed to zoom after include the correct version of chartjs and chartjs-plugin-zoom.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-zoom.min.js"></script>

This is my canvas tag

<div class='chart-wrapper'>
  <div class="training-chart-area" style="width: 768px; height: 384px;">
    <canvas id="trainingChart1"></canvas>
  </div>
</div>

My plugin option in my chart js function

options: {
      plugins: {
        zoom: {
          zoom: {
              enabled: true,  
              mode: 'y'
          },
          pan: {
              enabled: true
          }
        }
}

I know I have the correct version because I tested it with another HTML file. I thought the problem may be chartjs-plugin-zoom won't work with multiple datasets within one chart, but test HTML worked perfectly fine. I have no idea where went wrong.