JSFiddle - React, Tailwind, and code Playground

by fekkyDev s

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

var data = [
  ["2017-07-20", 0],
  ["2017-07-19", 0],
  ["2017-07-18", 562],
  ["2017-07-17", 746],
  ["2017-07-16", 0],
  ["2017-07-15", 0],
  ["2017-07-14", 0],
  ["2017-07-13", 0],
  ["2017-07-12", 0],
  ["2017-07-11", 0],
  ["2017-07-10", 0],
  ["2017-07-09", 0],
  ["2017-07-08", 0],
  ["2017-07-07", 0],
  ["2017-07-06", 0],
  ["2017-07-05", 0],
  ["2017-07-04", 0],
  ["2017-07-03", 0],
  ["2017-07-02", 0],
  ["2017-07-01", 0],
  ["2017-06-30", 0],
  ["2017-06-29", 0],
  ["2017-06-28", 0],
  ["2017-06-27", 0],
  ["2017-06-26", 0],
  ["2017-06-25", 0],
  ["2017-06-24", 0],
  ["2017-06-23", 0],
  ["2017-06-22", 0],
  ["2017-06-21", 0]
];

data.reverse();

data.forEach(function(point) {
  point[0] = new Date(point[0]).getTime();
});

var lastDate = data[data.length - 1][0], //	new Date(data[data.length - 1][0]).getTime(),
  days = 24 * 36e5;

Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: '光照量歷史圖表'
  },
  yAxis: {
    title: {
      text: '單位:Lux'
    }
  },
  series: [{
    name: '當日光照量',
    data: data,
    id: 'dataseries',
    tooltip: {
      valueDecimals: 4
    }
  }]
});