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="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<div class="container-fluid">
  <div class="col-12 mt-3 mb-3">

    <!--

    <form id="log_input">
      <div class="form-group">
        <label for="log_input_data">Log Data</label>
        <textarea class="form-control" id="log_input_data" rows="10"></textarea>
        <small class="form-text text-muted">Copy paste your csv log code here.</small>
      </div>
      <button type="submit" class="btn btn-success">Submit Log</button>
    </form>
    
    -->

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

  </div>
</div>

JavaScript

// document ready
(function($) {
    var timeFormat = 'DD/MM/YYYY';
    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: 0.3,
                y: 2640
              },
              {
                t: 0.85,
                y: 2560
              },
              {
                t: 1.33,
                y: 2560
              },
              {
                t: 1.78,
                y: 2560
              },
              {
                t: 2.23,
                y: 2680
              },
              {
                t: 2.7,
                y: 2920
              },
              {
                t: 3.16,
                y: 3200
              },
              {
                t: 3.63,
                y: 3520
              }]
          },
          {
            label: 'Mass Air Flow - Sensor',
            backgroundColor: '#00FFFF',
            borderColor: '#00FFFF',
            fill: false,
            data: [{
              t: 0.02,
              y: 19.58
            }, {
              t: 0.45,
              y: 16.28
            }, {
              t: 0.92,
              y: 8.56
            }, {
              t: 1.39,
              y: 8.47
            }, {
              t: 1.86,
              y: 23.36
            }, {
              t: 2.33,
              y: 45.78
            }, {
              t: 2.78,
              y: 56.03
            }, {
              t: 3.23,
              y: 62.36
            }]
          }],

      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: "Chart.js Time Scale"
        },
        scales: {
          xAxes: [{
            type: "time",
            time: {
              format:...