JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<script type="text/javascript" src="http://www.highcharts.com/js/themes/grid.js"></script>
<div id="container" style="height: 500px"></div>

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: 'container'
            },

            rangeSelector: {
                selected: 1
            },
            
            yAxis: [{
              //  gridLineWidth: 0,
                minorGridLineWidth: 0,
            plotBands: [{ 
                 color: 'rgba(1, 143, 189, 1)',
                 from: -2,
                 to: 11
             },
             { 
                 color: 'rgba(157, 200, 5, 1)',
                 from: 11,
                 to: 21
             },
             { 
                 color: 'rgba(202, 1, 94, 1)',
                 from: 21,
                 to: 50
             }],
                startOnTick: false,
             //   min: 1,
                showFirstLabel: true,
                showLastLabel: true,
                reversed: true,
                tickPositioner: function(min, max) {
                    // specify an interval for ticks or use max and min to get the interval
                    var interval = Math.round((max-min)/5);
                    // push the min value at beginning of array
                    var dataMin=this.dataMin;
                    var dataMax=this.dataMax;          
                    var positions = [dataMin];
                    var defaultPositions = this.getLinearTickPositions(interval, dataMin, max);
                    //push all other values that fall between min and max
                    for (var i = 0; i < defaultPositions.length; i++) {
                        if (defaultPositions[i] > dataMin && defaultPositions[i] < dataMax) {
                            positions.push(defaultPositions[i]);
                        }
                    }
                    // push the max value at the end of the array
                   ...