JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container">
    <div id="graph"></div>
    <button id="create">Create serier and add</button>
 </div>

JavaScript

var chart;
$(document).ready(function(){
    
    function randomData(len){
        var arr = [];
        for(var i = 0; i<len;i++){
            arr.push(Math.random())
        }
        return arr;
    }
    
    var options = {
        chart:{
            renderTo:'graph',
            type:'line'
        },
        title:{
            text:null
        },
        xAxis: {
            plotBands: [{
                    from: 5,
                    to: 6,
                    color: 'yellow',
                    label: {
                            text: 'Yellow'
                    }
            }, {
                    from: 10,
                    to: 11,
                    color: 'green',
                    label: {
                            text: 'Green'
                    }
            }]
    },
        plotOptions:{
            series:{
                animation:false,
                dataLabels:{enabled:true,formatter:function(){return Highcharts.numberFormat(this.y)}}
            }
        }
    }
    
    chart = new Highcharts.Chart(options);
    var i = 1, s1,s2,s3,s4;
    
    function createChart(){
        s1 = chart.addSeries({data:randomData(20),name:'Line'+i},true);
    }
    
    $('#create').click(function(){  createChart() });
    
})