JSFiddle - React, Tailwind, and code Playground

by dacaserna

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
  var chart = new Highcharts.Chart({

    chart: {
      renderTo: 'container',
      type: 'line'
    },
    title: {
      text: 'Windspeed & Direction',
      x: -20 //center
    },
    subtitle: {
      text: 'User Submitted',
      x: -20
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    xAxis: {
      type: 'datetime',
      showFirstLabel:true,
      showLastLabel:true,
      min:Date.UTC(2012,11,31,6,0,0,0),
      minRange: 24 * 3600 * 1000,
      dateTimeLabelFormats: {
        hour: '%H:%M',
      }
    },
    yAxis: {
      lineColor: '#999',
      lineWidth: 1,
      tickColor: '#666',
      tickWidth: 1,
      tickLength: 3,
      gridLineColor: '#ddd',
      title: {
        text: 'Wind Speed (K)'
      },
    },
    series: [{
      pointInterval: 3600 * 1000,
      pointStart:Date.UTC(2012,11,31,6,30,0,0),                            
      data: [12, 1, 3, 7, 14]
    }]

  });
});