JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

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

    <div id="chart0" style="width: 565px; height: 450px; margin: 5px; padding: 0px; border: 0px">
    </div>

JavaScript

//////////// SELECT ALL BUTTON //////////////
$(document).ready(function() {
    
    
    /**
     * Highcharts plugin for setting a lower opacity for other series than the one that is hovered
     * in the legend
     */
    (function (Highcharts) {
        var each = Highcharts.each;
        
        Highcharts.wrap(Highcharts.Legend.prototype, 'renderItem', function (proceed, item) {
            
            
            proceed.call(this, item);
            
            var series = this.chart.series,
                element = item.legendGroup.element;
            
            element.onmouseover = function () {
               each(series, function (seriesItem) {
                    if (seriesItem !== item) {
                        each(['group', 'markerGroup'], function (group) {
                            seriesItem[group].attr('opacity', 0.25);
                        });
                    }
                });
            }
            element.onmouseout = function () {
               each(series, function (seriesItem) {
                    if (seriesItem !== item) {
                        each(['group', 'markerGroup'], function (group) {
                            seriesItem[group].attr('opacity', 1);
                        });
                    }
                });
            }           
            
        });
    }(Highcharts));
    
    
    
    
    $('#toggle_btn').toggle(function() {
        var i;

        for (i = 0; i < chart.length; i++) {
            $.each(chart[i].series, function(j, serie) {
                serie.show();

            })
        }
    },


    function() {
        var i;

        for (i = 0; i < chart.length; i++) {
            $.each(chart[i].series, function(j, serie) {
                serie.hide();

            })
        }
    }

    )


    ///////////////////////////MAKE CHART fucntion/////////////////////////////////////////////

    var chart = [],
        i;

    for (i = 0; i < 1; i++) {
       ...