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="container" class="container"></div>
<div id="container-pie" class="container"></div>

CSS

.container {
    margin: 0 auto;
    min-width: 400px;
    height: 300px;
}
#container-pie {
    width: 500px;
}

JavaScript

$(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 isPoint = !!item.series,
                collection = isPoint ? item.series.points : this.chart.series,
                groups = isPoint ? ['graphic'] : ['group', 'markerGroup'],
                element = item.legendGroup.element;
            
            element.onmouseover = function () {
               each(collection, function (seriesItem) {
                    if (seriesItem !== item) {
                        each(groups, function (group) {
                            seriesItem[group].animate({
                                opacity: 0.25
                            }, {
                                duration: 150
                            });
                        });
                    }
                });
            }
            element.onmouseout = function () {
               each(collection, function (seriesItem) {
                    if (seriesItem !== item) {
                        each(groups, function (group) {
                            seriesItem[group].animate({
                                opacity: 1
                            }, {
                                duration: 50
                            });
                        });
                    }
                });
            }           
            
        });
    }(Highcharts));
    
    
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
          ...