JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/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>

JavaScript

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {        
        var data1 = [ [100,0], [200,0], [300,1], [400,0], [500,1] ];
        var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];      
        var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];    
        var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];

        // create the chart
        var chart = $('#container').highcharts('StockChart', {

            title: {
                text: 'AAPL Historical'
            },
            legend: {
                enabled: true
            },            
            
            plotOptions: {
                series: {
                    events: {
                        hide: function (event) {
                            this.yAxis.update({
                                height: '0%'
                            });
                        },
                        show: function (event) {
                            this.yAxis.update({
                                height: '25%'
                            });
                        }
                    }
                }
            },
            
            tooltip: {
                pointFormatter: function() {
                    var state = (this.y == 1 ? "Active" : "Inactive");
                    var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'

                    return tooltip;
                }
            },
            
            yAxis: [{
                height: '25%',
                offset: 0,
                lineWidth: 2,
                labels: {enabled: true}
            }, {
                top: '25%',
                height: '25%',
                offset: 0,
                lineWidth: 2,
                labels: {enabled: true}
            }, {
                top: '50%',
               ...