JSFiddle - React, Tailwind, and code Playground

by navindian

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>Highcharts JS Bin</title>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script class="jsbin" src="http://code.highcharts.com/stock/highstock.src.js"></script>
</head>
<body>
  <div id="BabylonTrend"></div>
</body>
</html>

JavaScript

$(function() {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
          renderTo : 'BabylonTrend',
                zoomType : 'xy',

                events : {
                    load : function() {

                        var chart = this, axis = chart.xAxis[0], buttons = chart.rangeSelector.buttons;
                        alert(buttons);
                        buttons[3].on('click', function(e) {
                            alert('button 3');
                        });
                    }
                }
            },
            rangeSelector : {
                buttons : [{
                    type : 'minute',
                    count : 1,
                    text : 'Min'
                }, {
                    type : 'minute',
                    count : 60,
                    text : 'Hr'
                }, {
                    type : 'day',
                    count : 1,
                    text : 'day'
                }, {
                    type : 'all',
                    text : 'All'
                }]
            },plotOptions : {
          series : {
            showCheckbox : true,

            events : {
              checkboxClick : function(event) {
                if (this.visible) {
                  //  this.hide();
                } else {
                  this.show();
                }
              },
              legendItemClick : function(event) {
                console.log(this.visible, !this.visible)
                chart.series[0].checkbox.checked = this.selected = !this.visible;

              }
            }
          }
        },
            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip : {
                   ...