JSFiddle - React, Tailwind, and code Playground

by hamzeen hameem

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: 500px; min-width: 500px"></div>

JavaScript

$(function() {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
       var chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                marginTop: 30,
                marginLeft: 30,
                marginRight: 30
            },
            colors: ['#0098e2','#0098e2','#0098e2','#0098e2','#0098e2','#0098e2','#0098e2','#0098e2','#0098e2','#0098e2'],
            scrollbar: { enabled: false },
            navigator: { enabled: false },
            tooltip: {
                useHTML: true,
                backgroundColor: 'rgba(255, 255, 255, .0)',
                color: '#000000',
                shadow: false,
                borderWidth: 0,
                valueDecimals: 2,
                headerFormat: '<small>{point.key}</small><table>',
                pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
                '<td style="text-align: right"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                formatter: function(){
                    var date = new Date();
                    return '<div class="tooltip">'+
                        '<h4>CPU</h4>'+
                        '<span>System:</span> <b>'+this.points[0].y+'</b><br />'+
                        '<div class="time"><img src="http://i55.tinypic.com/2cpc35w.png">'+ date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()+'</time>'
                    '</div>';
                },
            },
            rangeSelector: {
                buttons: [{
                   type: 'month',
                   count: 1,
                   text: 'Minutes'
                }, {
                   type: 'month',
                   count: 3,
                   text: 'Hours'
                }, {
                   type: 'month',
                    count: 6,
                    text: 'Days'
                }, {
                  ...