Highcharts test tool

by Torstein Hønsi

HTML

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

<div id="container2"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

$('#container2').highcharts({
    
    chart: {
        type: 'column'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    plotOptions: {
        series: {
            events: {
                mouseOver: function () {
                    var cur = this;
                    Highcharts.each(this.chart.series, function (series) {
                        if (series !== cur) {
                            series.group.animate({
                                opacity: 0.2
                            }, {
                                duration: 150
                            });
                        } else {
                            series.group.animate({
                                opacity: 1
                            }, {
                                duration: 150
                            });
                        }   
                    });
                },
                mouseOut: function () {
                    this.group.animate({
                        opacity: 1
                    }, {
                        duration: 150
                    });
                }   
            }
        }
    },

    series: [{
        data: [1,3,2,4]
    }, {
        data: [4,2,3,1]
    }, {
        data: [5,3,4,2]
    }]

});