CODEWITHSUNDEEP
highcharts
Steven
Steven

Reputation: 1494

Highcharts : Change color of series when hovering other series

I have an issue where I want to change the fill color of a column series when hovering another series. (This is to visualize related series)

I succeeded in changing the color on mouseOver, but I'm not able to restore the color on mouseOut.

The code I have until now is on jsFiddle

var hoverSerie;
var originalColor;
var newColor = '#a760d6'

$(function () {
    var t = $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series:[{
            events: {
                mouseOver: function() {

                    hoverSeries = this.chart.series[2]

                    originalColor = hoverSeries.options.color;
                    hoverSeries.options.color = newColor;
                    hoverSeries.update(hoverSeries.options);
                },
                mouseOut: function(){

                    if(originalColor)
                    {
                       hoverSeries.options.color = originalColor;
                       hoverSeries.update(); 
                    }
                }
            },
            animation : false,
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            animation : false,
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            animation : false,
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

When hovering (mouseOver) the top stacked series (light blue) the color of the bottom (black) series. For one or other reason, the mouse out event is working differently as the mousOver event. The code appears to loop when doing a mouseOut.

Upvotes: 1

Views: 1229

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Apparently when doing update inside mouseOut the redraw-part of the update causes mouseOut to be called recursively, eventually leading to "stack size exceeded". In this updated Fiddle I've used a boolean to prevent it from happening recursively, which seems to be working for me in Chrome. Hope it it what you were looking for. The only real change is the addition of the mouseWasOver variable used in both mouseOver and mouseOut.

This appears to be a bug(?) related to calling update inside mouseOut that was reported as early as 2011 on their GitHub, and 2010 on their forum.

Upvotes: 1

Related Questions