JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="trend_bl" style="min-width: 400px; height: 400px; margin: 0 auto"></div><div id='fail'></div>

<p id="demo"></p>
<p id="demo2"></p>

SCSS

body {
  margin: 10px;
}

.pass {
  color: green;
}

.fail {
  color: red;
  text-decoration: line-through;
}

.demo {
  margin: 20px 10px 10px 30px;
  font-size: 20px;
}
/*
function myFunction(p1, p2) {
    return p1 * p2;
}

document.getElementById("demo").innerHTML = myFunction(4, 3);
*/

JavaScript

var JSON = [{
  name: "Maintenance",
  data: [
    ['2017-06-26', 1.5],
    ['2017-07-03', 1.5],
    ['2017-07-10', 1.5],
    ['2017-07-17', 1.5],
    ['2017-07-24', 1.5]
  ]

}];

Object.keys(JSON).map(function(key, index) {
  JSON[key].data.map(function(value, keys, index) {
    JSON[key].data[keys][0]=new Date(value[0]).getTime()
  })
});

console.log(JSON)


//Draw chart
Highcharts.chart('trend_bl', {

  title: {
    text: 'Trend '
  },
  xAxis: {
    type: 'datetime',
  },
  yAxis: {
    title: {
      text: ' Resource Allocation'
    }
  },
 

  series: JSON,
});