JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

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

<div id="container" style="height: 400px; min-width: 310px"></div>
<button onclick="update()">
  Update
</button>

JavaScript

function update () {
	 var chart = $('#container').highcharts();
   chart.series[0].update({
   		type: "area"      
   });
  // chart.series[0].navigatorSeries.update({type: "area"});
}

$(function () {
    /**
     * Load new data depending on the selected min and max
     */
  /*  function afterSetExtremes(e) {

        var chart = $('#container').highcharts();

        chart.showLoading('Loading data from server...');
        $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
                '&end=' + Math.round(e.max) + '&callback=?', function (data) {

            chart.series[0].setData(data);
            chart.hideLoading();
        });
    }
*/
    // See source code from the JSONP handler at https://github.com/highcharts/highcharts/blob/master/samples/data/from-sql.php
    $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function (data) {
        // create the chart
        $('#container').highcharts('StockChart', {
      /*      chart: {
             events: {
                    load: function () {
                        var extremes = this.xAxis[0].getExtremes();
                        this.xAxis[0].setExtremes(extremes.max - (365 * 24 * 3600 * 1000), extremes.max); 
                    }
              },
              zoomType: 'x'
            },
*/
            navigator: {
           //     adaptToUpdatedData: false,
             //   series: []
            },

            scrollbar: {
                liveRedraw: false
            },

            rangeSelector: {        
                    buttons: [{
                    type: 'hour',
                    count: 1,
                    text: '1h'
                }, {
                    type: 'day',
                    count: 1,
                    text: '1d'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type:...