JSFiddle - React, Tailwind, and code Playground

by Fairlight

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
   <canvas id="myChart" width="400" height="200"></canvas>

CSS

.chart {
          display: float;
          width: 30%;
        }

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");

  let orgData = [{
      x: "2019-01-01 00:01:38",
      y: "10.0"
    },
    {
      x: "2019-01-01 01:01:39",
      y: "11.0"
    },
    {
      x: "2019-01-01 02:01:40",
      y: "12.0"
    },
    {
      x: "2019-01-01 03:01:41",
      y: "13.0"
    },
    {
      x: "2019-01-01 04:01:42",
      y: "14.0"
    }
  ];

  var populationData = [{
      x: "2019-01-01 01:01:42",
      y: 14.671
    }, {
      x: "2019-01-01 02:01:42",
      y: 13.691
    }, {
      x: "2019-01-01 03:01:42",
      y: 16.691
    }, {
      x: "2019-01-01 04:01:42",
      y: 17.691
    }, {
      x: "2019-01-01 05:01:42",
      y: 18.691
    }

  ];

  console.log(orgData);
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      datasets: [{
        label: '1st Data',
        data: orgData,
        borderColor: '#0f0',
        showLine: true
      }, {
        label: '2nd Data',
        data: populationData,
        borderColor: '#f00',
        showLine: true
      }]
    },
    options: {
      scales: {
        xAxes: [{
          type: 'time',
          time: {
            displayFormat: 'h:mm',
          }
        }]
      }
    }
  });