JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>

<div id="container" style="height: 300px; width: 1200px;"></div>

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },
    xAxis: [{
        type: 'datetime',
        tickInterval: 900 * 1000,
        labels: {
            rotation: -90,
            x: 4,
            formatter: function(){
                return Highcharts.dateFormat('%M', this.value)
            }
        }
    },{
        type: 'datetime',
        tickInterval: 3600 * 1000,
        offset: 25,
        linkedTo: 0,
        labels: {
            align: 'left',
            formatter: function(){
                return Highcharts.dateFormat('%I %p', this.value)
            }
        }
    },{
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000,
        offset: 50,
        linkedTo: 0,
        labels: {
            align: 'left',
            formatter: function(){
                return Highcharts.dateFormat('%d %m %Y', this.value)
            }
        }
    }],
    
    series: [{
        data: (function(){
            for(var i=0, arr=[]; i<100; i++)
                arr.push( Math.random() )
            return arr;
        })(),
        pointInterval: 900 * 1000,
        pointStart: Date.UTC(2011,0,1)
    }]
});