JSFiddle - React, Tailwind, and code Playground

by spitfire378

HTML

<div class="main-container">
      <div id="chart" style="height:500px;"></div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>

CSS

#chart span:hover {
	border: 1px solid silver;
	background-color: rgba(202, 202, 202, 0.2);
	width: 800px;
	z-index: 1;
}

JavaScript

var Tab_0_xx =  [[0, 1385043773034, 1385049600000]];
var Tab_0_yy = [[0, 1385043773034, 1385049600000],  [0, 1385049600000 , 1385049600000],  [0, 1385139600000 , 1385048900000]];
var Tab_1_xx = [[1, 1384704000000,1384707600000], [1, 1384707600000,1384707600000], [1, 1384743600000,1384743600000], [1, 1384750800000,1384750800000], [1, 1384750800000,1384750800000], [1, 1384754400000,1384754400000], [1, 1384765200000,1384768800000], [1, 1384776000000,1384776000000], [1, 1384779600000,1384779600000], [1, 1384783200000,1384783200000]];
var Tab_1_yy =  [[1, 1385043773034, 1385049600000],  [1, 1385049600000 , 1385049600000],  [1, 1385049600000 , 1385049600000]];


var data_xx =  Tab_0_xx.concat(Tab_1_xx);
var data_yy =  Tab_0_yy.concat(Tab_1_yy);
var data_labels = [['value1', 'value2', '1'],['value3', 'value4', '2'],['value5', 'value6', '3'],['value7', 'value8', '5']];

var final_data_labels = [];
for (var i = 0; i < data_labels.length; i++) {
    final_data_labels.push('<div class="list-container"><div class="fleft"><strong>' + data_labels[i][0] + '</strong><br/>' + data_labels[i][1] + '</div><div class="fright">' + data_labels[i][2] + '</div><div class="clearer"></div></div>');
		
}


	$(function () {

        $('#chart').highcharts({

    
            chart: {
                type: 'columnrange',
                inverted: true,
                zoomType: 'y',
                marginLeft: '100'
            },
    
            title: {
                text: 'demo'
            },
    
            xAxis: {
                categories: final_data_labels,
                max: 1,
                labels: {
                	useHTML: true,
                	formatter: function() {
                        return this.value;
                	}
                }	
            },
    
            yAxis: {
            	type: 'datetime',
            	/*
            	min: 1384992000000,
            	max: 1385078399000,
            	*/
		        dateTimeLabelFormats: {
		            hour:...