JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://www.highcharts.com/samples/data/three-series-1000-points.js"></script>
<div id="chart"></div>

JavaScript

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function(data) {

                var chart = new Highcharts.StockChart({
                    chart: {
                        animation: false,
                        renderTo: 'chart',
                        borderColor: 'green',
                        borderWidth: 2,
                        borderRadius: 10
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        animation: false,
                        name: 'MSFT',
                        type: 'ohlc',
                        data: data
                    }],
                    navigator: {
                        enabled: true
                    },
                    rangeSelector: {
                        enabled: false
                    },
                    xAxis: {
                      ordinal: false  
                    },
                    yAxis: {
                        endOnTick: false,
                        startOnTick: false,
                        opposite: true,
                        offset: 25
                    },
                    scrollbar: {
                        enabled: false
                    }
                });
         
            });
           
        });



//dblclick

(function (ns) {

    //original xy positions
    var originalPositions = [];
    
    //extend init function
    ns.wrap(ns.Chart.prototype, 'init', function (proceed, chart, options) {
        proceed.call(this, chart, options);

        originalPositions[0] = this.xAxis[0].getExtremes();
        originalPositions[1] = this.yAxis[0].getExtremes();
    });
    
    //double click event
    ns.Chart.prototype.callbacks.push(function (chart) {
        ns.addEvent(chart.container, 'dblclick', function (e) {
            var positions = originalPositions,
       ...