JSFiddle - React, Tailwind, and code Playground

by fiddlerintheoffice

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<h1>Highstock: Two connected rows with different periods in one chart</h1>
<hr />
<div id="chart-main" style="height:300px"></div>
<hr />

CSS

h1 {
    font-size:16px
}

JavaScript

$(document).ready(function(){
var mainSeries = [
    [1343080800000, 11.31],
    [1343167200000, 10.82],
    [1343253600000, 70.87],
    [1343340000000, 5.23],
    [1343426400000, 56.06],
    [1343512800000, 7.69],
    [1343599200000, 59.39],
    [1343685600000, 63.72],
    [1343772000000, 0],
    [1343858400000, 64.91],
    [1343944800000, 70.63],
    [1344031200000, 55.17],
    [1344117600000, 61.89],
    [1344204000000, 66.73],
    [1344290400000, 68.12],
    [1344376800000, 66.89],
    [1344463200000, 75.45],
    [1344549600000, 0],
    [1344636000000, 46.34],
    [1344722400000, 0],
    [1344808800000, 70.5],
    [1344895200000, 5.64]
];
var compSeries = [
    [1311458400000, 4.31],
    [1311544800000, 6.82],
    [1311631200000, 50.87],
    [1311717600000, 20.23],
    [1311804000000, 40.06],
    [1311890400000, 19.69],
    [1311976800000, 34.39],
    [1312063200000, 45.72],
    [1312149600000, 12],
    [1312236000000, 33.91],
    [1312322400000, 41.63],
    [1312408800000, 32.17],
    [1312495200000, 23.89],
    [1312581600000, 17.73],
    [1312668000000, 16.12],
    [1312754400000, 13.89],
    [1312840800000, 9.45],
    [1312927200000, 14],
    [1313013600000, 34.34],
    [1313100000000, 33],
    [1313186400000, 55.5],
    [1313272800000, 78.64]
];

	$('#chart-main').highcharts('StockChart', {
		rangeSelector:{
			enabled:false
		},
		series:[
			{
				data : mainSeries,
				name : 'current Revenue',
				type:'areaspline',
				xAxis:0
			},
			{
				data : compSeries,
				name : 'comparization Revenue',
				type:'areaspline',
				xAxis:1
			}
		],
		xAxis:[
			{
				minRange:1,
				type: 'datetime',
				events:{
					setExtremes:function(e){
						mySetTime(this, e);
					}
				},
				title:{text:'2012'},
				tickInterval:24 * 3600 * 1000
			},
			{
				minRange:1,
				type: 'datetime',
				opposite:true,
				title:{text:'2011'},
				tickInterval:24 * 3600 * 1000
			}
		],
		scrollbar:{
			enabled:false,
			liveRedraw: false
		},
		yAxis:...