JSFiddle - React, Tailwind, and code Playground

by shwetakhati

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div class="chart-wrapper">
  <div class="chart-inner">
        <div id="container1" style="width:100%; height: 100%;"></div>
  </div></div>
<div class="chart-wrapper"><div class="chart-inner">
<div id="container2" style="width:100%; height: 100%;"></div></div></div>
<div class="chart-wrapper"><div class="chart-inner">
<div id="container3" style="width:100%; height: 100%;"></div></div></div>

CSS

.chart-wrapper {
    position: relative;
    padding-bottom: 40%;
    width:45%;
    float:left;
}

.chart-inner {
    position: absolute;
    width: 50%; height: 100%;
}

JavaScript

$(function() {
    var chart = [],
        data = [],
        data1 = [];
    $(document).ready(function() {
       
        addChart('container1','abc');
        addChart('container2','def');
        addChart('container3','ghi');
    });
    var time = (new Date()).getTime();

    function newRandomData(n, sign) {
        // generate an array of random data
        var data = [],
            i;

        for (i = -1 * n; i <= 0; i++) {
            data.push([time + i * 3600 * 1000, sign * Math.random() * 512]);
        }
        return data;
    }
    function addChart(id,title) {

        chart.push(new Highcharts.Chart({
           chart: {
            renderTo: id,
            zoomType: 'x',
            type: 'area'
        },
           title:{
                text:title
            },
             rangeSelector: {
            selected: 4
        },
            xAxis:{
                type:'datetime'
            },
        yAxis: {

            labels: {
                formatter: function() {
                    return Math.abs(this.value) + 'Points';
                }
            }
        },


        tooltip: {
            valueSuffix: ' Points',
            useHTML: true,
             shared:true,
            formatter: function() {
                var tooltip = '<span style="font-size:10px;">' + Highcharts.dateFormat('%A, %b %e %Y', this.x) + '</span><br/>';
                $.each(this.points, function(i,e) {
                    tooltip += '<span style=" color:'+this.series.color+'">'+this.series.name+':  </span><b>'+Highcharts.numberFormat(Math.abs(this.point.y),2)+' Points</b><br/>';
                });

                return tooltip;
            }

        },
             
 series: [
            {
            data: newRandomData(10, 1),
            name: 'Blue'},
        {
            data: newRandomData(10, -1),
            name: 'Red'}
        ]
        })
        );
    }
});