JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://npmcdn.com/Chart.Zoom.js@latest/Chart.Zoom.min.js"></script>
<canvas id="myChart"></canvas>

JavaScript

let ctx = document.getElementById('myChart')

let chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [7, 10, 3, 5, 2, 3],
      fill: true,
      backgroundColor: 'orange',
      borderColor: 'green',
      pointBorderColor: 'red',
      pointBackgroundColor: 'red'
    }]
  },
  options: {
    pan: {
      enabled: true,
      mode: 'x',     
    },
    zoom: {
      enabled: true,         
      mode: 'x',     
    },
    responsive: true
  }
})