JSFiddle - React, Tailwind, and code Playground

by Viseth7

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<script src="https://unpkg.com/[email protected]/timeline.min.js"></script>
<div id="chartTarget" style="height: 160px; width: 100%;">
  <canvas id="chartCanvas" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
  <div style="opacity:0;" class="chartTooltip center">
  </div>
</div>

JavaScript

var data = {
  "type": "timeline",
  "options": {
      "elements": {
          "colorFunction": function(text, data, dataset, index) {
							switch (data[2]) {
								case 'Off':
									return Color('rgb(250, 1, 1)');
								case 'EXCEPTION':
									return Color('grey');
								case 'On':
									return Color('rgb(92, 184, 92)');												
								default:
									return Color('grey');
							}          
          },
          "showText": true,
          "textPadding": 4
      }
  },
  "data": {
      "labels": [
          "Cool Graph",
          "heater1"
      ],
      "datasets": [
          {
              "data": [
                  [
                      "2018-01-22T16:00:00.000Z",
                      "2018-01-23T05:40:44.626Z",
                      "Unknown"
                  ]
              ]
          },
          {
              "data": [
                  [
                      "2018-01-22T16:00:00.000Z",
                      "2018-01-22T20:00:00.000Z",
                      "On"
                  ],
                  [
                      "2018-01-22T20:00:00.000Z",
                      "2018-01-23T04:57:55.437Z",
                      "Off"
                  ],
                  [
                      "2018-01-23T04:57:55.437Z",
                      "2018-01-23T05:40:44.626Z",
                      "On"
                  ]
              ]
          }
      ]
  },
};
var chart = new Chart($('#chartCanvas')[0], data);