JSFiddle - React, Tailwind, and code Playground

by Muhammad Mushtaq Sheikh

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) {
    Flagcopy = null;
    chart_1_1_cloneToolTip = null;
    chart_1_1_checkx = [];
    chart_1_1_cloneFrame = [];
    chart_1_1_cloneText = [];

    // Create the chart
    var chart_1_1_Options = {
      chart: {
        renderTo: 'container',
      },

      rangeSelector: {
        selected: 1
      },

      title: {
        text: 'AAPL'
      },

      yAxis: {
        title: {
          text: 'Price'
        }
      },
      
      tooltip: {
            shared:    false,
            useHTML:   true,
            formatter: function () {
                var tooltipcontent = '<div id="tooltip_' + this.x + '"><b>' + this.x + '</b>';
                var tooltipfooter = '';
                var mySum          = 0;
                tooltipcontent    += '<table style="width: 100%;">';

                var sortedPoints = this.points.sort(function(a, b){
                    return ((b.y < a.y) ? -1 : ((b.y > a.y) ? 1 : 0));
                });

                /**
                 * we have to loop here as we don't yet know how many series we will have
                 */
                $.each(this.points, function () {
                    var symbol     = 'â– ';
                    var avg_suffix = '';
                    if (this.series.name == 'average dwelltime') {
                        tooltipfooter += '<tr><td><br><span style="color:' + this.point.color + '">' + symbol + '</span> '
                                          + this.series.name + ':</td><td style="text-align: right;"><br>' + moment.duration(this.y, 'minutes').format('H [h] m [m]') + '</td></tr>';
                    } else {
                        tooltipcontent += '<tr><td><span style="color:' + this.point.color + '">' + symbol + '</span> '
                                          + this.series.name + ':</td><td style="text-align: right;">' + this.y.toLocaleString()...