javascript - HighCharts : Highlight entire series when hover and restore state when out - Stack Overflow

admin管理员组

文章数量:1314033

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

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

• javascript
• jquery
• highcharts

Share Improve this question Follow edited May 23, 2017 at 11:47 CommunityBot 111 silver badge asked Jul 11, 2014 at 15:42 StevenSteven 1,4941818 silver badges2424 bronze badges 1

• 1 Steven, check my answer... – Hackerman Commented Jul 11, 2014 at 17:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/robertrozas/9W8h4/

You need to add events to each series please see here

or here : http://jsfiddle/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]
        }]
    });
});

本文标签： javascriptHighChartsHighlight entire series when hover and restore state when outStack Overflow