JSFiddle - React, Tailwind, and code Playground

by MauricioSO2021

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<div style="width: 500px; height: 500px;"><canvas id="myChart" width="400" height="400"></canvas></div>

JavaScript

/*
        Source: https://jsfiddle.net/microMerlin/3wfoL7jc/
*/

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: '1619701200',
        y: 41
      }, {
        x: '1619704800',
        y: 9
      }, {
        x: '1619708400',
        y: 21
      }]
    }]
  },
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        min: Date.now() - (24 * 60 * 60 * 1000),
        max: Date.now(),
        type: "linear",
        position: "bottom",
        //stacked: true,
        ticks: {
          //beginAtZero: true,
          userCallback: function(t, i) {
            /*console.log("t: " + t.toString());
            console.log("i: " + i.toString());*/
            return i;
          }
        }
      }]
    }
  }
});