JSFiddle - React, Tailwind, and code Playground

by sarfarazdesigner

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>
<div id="selectedButton"></div>

<div id="report" style="font: 0.8em sans-serif"></div>

JavaScript

$(function () {

var abc = [
[
  [1257120000000,27.04],
  [1257206400000,26.96],
  [1257292800000,27.26],
  [1257379200000,27.72],
  [1257465600000,27.76],
  [1257724800000,28.78],
  [1257811200000,29.00],
  [1257897600000,29.04],
  [1257984000000,28.86],
  [1258070400000,29.21],
  [1258329600000,29.52],
  [1258416000000,29.57],
  [1258502400000,29.42],
  [1258588800000,28.64],
  [1258675200000,28.56],
  [1258934400000,29.41],
  [1259020800000,29.21],
  [1259107200000,29.17],
  [1259280000000,28.66],
  [1259539200000,28.56]
],
[
  [1257120000000,09.57],
  [1257206400000,10.63],
  [1257292800000,10.14],
  [1257379200000,10.08],
  [1257465600000,13.28],
  [1257724800000,12.02],
  [1257811200000,10.67],
  [1257897600000,11.09],
  [1257984000000,20.92],
  [1258070400000,14.42],
  [1258416000000,10.72],
  [1258502400000,11.25],
  [1258588800000,10.72],
  [1258675200000,14.25],
  [1258934400000,11.01],
  [1259020800000,13.42],
  [1259107200000,10.70],
  [1259280000000,12.47],
  [1259539200000,14.44]
]
];

    var seriesOptions = [],
        seriesCounter = 0,
        names = ["abc", "dude"];
        
    var $report = $('#report');

    $.each(names, function (i, name) {

        seriesOptions[i] = {
            name: name,
            data: abc[i]
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seriesCounter += 1;

        if (seriesCounter === names.length) {
            createChart();
        }
        
    });
    
    function createChart() {

        $('#container').highcharts('StockChart', {
        
        		chart: {
            	zoomType: 'x',
            	events: {
                selection: function (event) {
                  if (event.xAxis) {
                    $report.html('Last selection:<br/>min: ' + Highcharts.dateFormat('%Y-%m-%d', event.xAxis[0].min) +
                                 ', max: ' +...