JSFiddle - React, Tailwind, and code Playground

by Subigya Panta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://npmcdn.com/[email protected]/Chart.Zoom.min.js"></script>
<canvas id="canvas" height="180"></canvas>
<canvas id="myChart" height="180"></canvas>

JavaScript

var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
      datasets: [{
         label: '# of Votes',
         data: [12, 19, 3, 5, 2, 5, 9, 4, 11]
      }]
   },
   options: {
      pan: {
         enabled: true,
         mode: 'x',
      },
      zoom: {
         enabled: true,
         mode: 'x',
      }
   }
});

var ctxx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctxx, {
      // The type of chart we want to create
      type: 'line',
      // The data for our dataset
      data: {
        labels: ["2019-08-30", "2019-08-31", "2019-08-32", "2019-08-33"],
        datasets: [{
            label: "Your Score in %",
            borderColor: 'rgb(255, 99, 132)',
            data: [20.0, 70.0, 0.0, 40.0],
        }]
      }, 
      
  		// Configuration options go here
  		options: {
          pan: {
            enabled: true,
            mode: 'x',
          },
          zoom: {
            enabled: true,
            mode: 'x',
          }
      }
});