JSFiddle - React, Tailwind, and code Playground

by malonso

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<button id="btn-1">Show Chart 1</button>
<button id="btn-2">Show Chart 2</button>
<button id="btn-1-rd">Redraw Chart 1</button>
<button id="btn-2-rd">Redraw Chart 2</button>
<div id="container-1" style=" height: 400px; width: 600px; margin: 0 auto"></div>
<div id="container-2" style=" height: 400px; width: 600px; margin: 0 auto;display:none;"></div>

JavaScript

//$(function () {
var data1=[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
    $('#btn-1').on('click',function(){
        $('#container-2').hide();
        $('#container-1').show();
    });
    $('#btn-1-rd').on('click',function(){
        $('#container-2').hide();
        $('#container-1').show();
        chart1.redraw();
    });
    $('#btn-2-rd').on('click',function(){
        $('#container-1').hide();
        $('#container-2').show();
        chart2.redraw();
    });
    $('#btn-2').on('click',function(){
        $('#container-1').hide();
        $('#container-2').show();
    });
    var chart1Options={
 chart: {
           renderTo: 'container-1',
            width: 600,
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    };
    var chart2Options=new Highcharts.Chart({
 chart: {
           renderTo: 'container-2',
            width: 600,
           marginRight: 35 
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },        
        series: [{
            data: [-29.9, 71.5, 106.4, 29.2, 144.0, 76.0, 135.6, 48.5, 116.4, 194.1, 95.6, 54.4]        
        }]
    });
//});