JSFiddle - React, Tailwind, and code Playground

by Anil D

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width:900px;height: 318px; margin: 0 auto"></div>

JavaScript

Highcharts.wrap(Highcharts.Axis.prototype, 'setExtremes', function (proceed) {
    var args = [].slice.call(arguments, 1);

    args[0] = Math.round(args[0]);
    args[1] = Math.round(args[1]);

    proceed.apply(this, args);;
});

Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'getColumnMetrics', function (proceed) {
    var result = proceed.apply(this, [].slice.call(arguments, 1)),
        pointWidth = this.options._pointWidth || result.width;

    return {
        width: pointWidth,
        offset: result.offset * (pointWidth / result.width)
    };

});

$(function () {

    $('#container').highcharts({
			chart : {
				type : 'scatter',
				animation : false,
				width : 874,
				height : 318,
				plotBackgroundColor : '#E0FFFF',
                margin : [ 35, 48, 112, 96 ]
			// marginTop, marginRight, marginBottom and marginLeft
			},
			title : {
				text : ''
			},
			credits : {
				enabled : false
			},
			legend : {
				enabled : false
			},
			xAxis : [ {
				offset : 10,
				startOnTick : true,
				endOnTick : true,
				type : 'datetime',
				tickInterval : 10 * 60 * 1000,
                min:1397401200000,
                max:1397410200000,
                labels : {
					formatter : function() {
						var label = Highcharts.dateFormat('%H%M', this.value);
						var index = $.inArray(this.value,
								this.axis.tickPositions);
						// var index = $.inArray(this.value,
						// this.axis.categories);
						if (index < 144) {
							label += "<br>";
							var iterableGenData =...