JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<div class="container-fluid">
  <div class="col-12 mt-3 mb-3">

    <canvas id="log_chart" width="600" height="400"></canvas>

  </div>
</div>

JavaScript

var ctx = document.getElementById('log_chart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Engine Speed',
      backgroundColor: '#ff0000',
      borderColor: '#ff0000',
      fill: false,
      data: [{
        t: new Date(0.37),
        y: 2640
      }, {
        t: new Date(0.85),
        y: 2560
      }, {
        t: new Date(1.33),
        y: 2560
      }, {
        t: new Date(1.78),
        y: 2560
      }, {
        t: new Date(2.23),
        y: 2680
      }, {
        t: new Date(2.7),
        y: 2920
      }, {
        t: new Date(3.16),
        y: 3200
      }, {
        t: new Date(3.63),
        y: 3520
      }]
    }, {
      label: 'Mass Air Flow - Sensor',
      backgroundColor: '#00FFFF',
      borderColor: '#00FFFF',
      fill: false,
      data: [{
        t: new Date(0.02),
        y: 19.58
      }, {
        t: new Date(0.45),
        y: 16.28
      }, {
        t: new Date(0.92),
        y: 8.56
      }, {
        t: new Date(1.39),
        y: 8.47
      }, {
        t: new Date(1.86),
        y: 23.36
      }, {
        t: new Date(2.33),
        y: 45.78
      }, {
        t: new Date(2.78),
        y: 56.03
      }, {
        t: new Date(3.23),
        y: 62.36
      }]
    }],

  },
  options: {
    scales: {
      scales: {
        xAxes: [{
          type: 'linear',
          position: 'bottom'
        }]
      }
    }
  }
});