JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>


<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

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

        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                events: {
                    redraw: function() { //same as the callback for highcharts.stockchart constructor (as below)
                        $.each(chart.yAxis[0].plotLinesAndBands, function(i, L) {
                            var band = L.svgElem;
                            if (!band) {
                                return;
                            }
                            var path = band.d.split(' ');
                            var boxX1 = chart.xAxis[0].left + chart.series[0].xAxis.translate(Date.UTC(2011, 2, 21));
                            var boxX2 = chart.xAxis[0].left + chart.series[0].xAxis.translate(Date.UTC(2011, 4, 1));

                            path[1] = boxX1;
                            path[4] = boxX2;
                            if (path[6] && path[8]) {
                                path[6] = boxX2;
                                path[8] = boxX1;
                            }
                            band.attr('d', path);
                        });
                    },
                },
            },

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'USD to EUR exchange rate'
            },

            yAxis: {
                title: {
                    text: 'Exchange rate'
                },
                plotBands: [{
                    from: 0.6738,
                    to: 0.7419,
                    color: 'rgba(68, 170, 213, 0.2)',
                    label: {
                        text: 'Last quarter\'s value range'
                    }},{
                    from: 0.7238,
                    to: 0.8019,
                    color: 'rgba(100, 170, 213,...