HighCharts : Highlight entire series when hover and restore state when out

Question

I try to highlight an entire serie when hovering in a column chart. Due to the nature of the needed chart all columns are set side by side without spacing.

I partially succeeded in doing so by using mouseOver and mouseOut on the series, but it doesn't work when hovering to the next element of the same serie. The entire serie should remain highlighted, but i'm not able to disable the mouseOut if hovered within the same serie.

I tried doing by this code:

        series: [
            {
                events: {
                mouseOver: function() {
                    for(var i=0; i<this.data.length; i++)
                    {
                        this.data[i].setState('hover');
                    }

                },
                mouseOut: function(){

                    for(var i=0; i<this.data.length; i++)
                    {
                        this.data[i].setState('');
                    }
                }},

I put this in jsFiddle

When you hover the lightblue serie, it get highlighted entirely, but when hovering to the next element within that serie, the serie should remain highlighted entirely, but my expirement the elements get highlighted at random.

Any help appreciated

---

Update:

Based on the solution provided by Robert I added a little modification. By introducing the activation of the hover state on the tooltip formatter event, the mouseOver behavior became redundant and I removed it.

Solution : jsFiddle

Answer 1

You need to add events to each series please see here

or here : http://jsfiddle.net/uST2P/

$(function () {

    var myCustomEvent = {
        mouseOver: function () {
            overSeriesIndex = this.index;
            for (var i = 0; i < this.data.length; i++) {

                this.data[i].setState('hover');
            }

        },
        mouseOut: function () {

            for (var i = 0; i < this.data.length; i++) {
                this.data[i].setState('');
            }
        }
    };

    $('#container').highcharts({
        chart: {
            type: 'column',
            width: 585
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0,
                groupPadding: 0,
                borderColor: 'white',
                borderWidth: 1,
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            },
            series: {
                pointWidth: 100
            }
        },
        series: [{
            events: myCustomEvent,
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {

            events: myCustomEvent,
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            events: myCustomEvent,
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

Answer 2

Just a little change:

tooltip: {
            formatter: function() {
                for(var i=0; i<5; i++)
                    {
                        this.series.data[i].setState('hover');
                    }


                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }

Working fiddle: http://jsfiddle.net/robertrozas/9W8h4/