JSFiddle - React, Tailwind, and code Playground

by malonso

HTML

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<button id="buttonLoad">(Re)Load chart</button>

<button id="button">Show extremes</button>
<div id="debug"></div>

JavaScript

var chart;
var chartExists=0;
var series1Data=[1.35,1.05,3.8,3.1,-0.45,8,9.7,9.7,2.7,3.05,4.05,1.15,4.425,3.015,1.785,-2.02,-10.725,0.69,3.6,3.26,4.645,3.33,-0.99499999999999,-8.81,-14.3,-12.33,-2.855,-0.72499999999999];
var series2Data=[72.5,69.6,69.8,68.7,69.8,72.7,76.5,76.6,64.4,66.4,66.2,66.2,67.87,68.01,70.36,67.67,67.82,70.34,70.79,66.67,64.68,65.14,65.34,65.52,64.08,63.79,61.28,63.55];

var series1={type:'column',data:[]};
var series2={type:'line',data:[],yAxis:1};

var options = {
    chart: {
        alignTicks: true,
        plotBorderColor: '#000',
        plotBorderWidth: 1,
        renderTo: 'container',
        height: 400,
        width: 500
    },
    series:[],
    yAxis:[{},{opposite:true}]
};
$('#buttonLoad').click(function() {
    loadChart();
});

$('#button').click(function() {
    $('#debug').append("<br><br>New Extremes are:<br>");
    var extremes=chart.yAxis[0].getExtremes();
    $('#debug').append("dataMax="+extremes.dataMax+"<br>");
    $('#debug').append("dataMin="+extremes.dataMin+"<br>");
    $('#debug').append("max="+extremes.max+"<br>");
    $('#debug').append("min="+extremes.min+"<br>");
});


function loadChart(){  

    var fakeColumnSeries={
        type:'column',
        data:[],
        yAxis:0
    };
    var fakeLineSeries={
        type:'line',
        data:[],
        yAxis:1
    };
    
    fakeColumnSeries.data=series1Data;
    fakeLineSeries.data=series2Data;
    if(chartExists ==1){

        chart.series[0].remove(false);
        chart.addSeries(fakeColumnSeries);
        chart.yAxis[0].setExtremes(-20,20,false);
        chart.yAxis[0].options.tickInterval=10;
        
        chart.addSeries(fakeLineSeries);
        chart.yAxis[1].setExtremes(40,80,false);
        chart.yAxis[1].options.tickInterval=5;
        chart.redraw();

    }else{
        
        options.series.push(fakeColumnSeries);
        options.yAxis[0].max=20;
        options.yAxis[0].min=-20;
        options.yAxis[0].tickInterval=10;
        chart =...