JSFiddle - React, Tailwind, and code Playground

by Fairlight

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas" height="450" width="600"></canvas>

JavaScript

let labels = [];
let data1 = [];
let data2 = [];
for (let i = 0; i < 20; i++) {
  labels.push("l" + i);
  data1.push(Math.floor(Math.random() * 100));
  data2.push(Math.floor(Math.random() * 100));
}
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      //backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: data1
    }, {

      label: 'My First dataset',
      //backgroundColor: 'rgb(255, 255, 132)',
      borderColor: 'rgb(255, 255, 132)',
      data: data2

    }]
  },

  // Configuration options go here
  options: {
    animation: {
      duration: 0 // general animation time
    },
    tooltips: {
                        mode: 'index',
                        axis: 'y',
                        //mode: 'label',
                        //mode: 'nearest',
                        titleFontSize:24,
                        intersect:false,
                        bodyFontSize:24,
                        caretPadding:5
                    },
    hover: {
      animationDuration: 0 // duration of animations when hovering an item
    },
    responsiveAnimationDuration: 0, // animation duration after a resize
    elements: {
      line: {
        tension: 0 // disables bezier curves
      }
    },
    pan: {
       enabled: true,
        mode: 'x',
        onPan: () => {
           // sync_chart_min_max(id);
        }
    },
    zoom: {
        enabled: true,
        mode: 'x',
        onZoom: () => {
           // sync_chart_min_max(id);
        }
    },
  }
});