CODEWITHSUNDEEP
javascripthighchartshoverhighmaps
jlewkovich
jlewkovich

Reputation: 2775

How to enable hover effect for entire series instead of individual data

DEMO: http://jsfiddle.net/uwh7Lgyo/

If possible, I'd like the hover to be applied by background-color, instead of highlighting each state individually. That means, hover effects entire group of blue states when hovered over a blue state, entire group of green states when hovered over a green state, etc.

Upvotes: 1

Views: 372

Answers (1)

MorKadosh
MorKadosh

Reputation: 6006

It is possible.

First thing that came to my mind was setting the state of each series point to hover. This could be easily achieved by using highcharts's mouseOver and mouseOut events:

        plotOptions: {
            map: {
              allAreas: false,
              joinBy: ['hc-a2', 'code'],
              mapData: Highcharts.maps['countries/us/us-all']
            },

            series: {
                states:{
                   normal: {
                        animation: false
                    }
                },
                point: {
                    events: {
                        mouseOver: function(){
                          var ser = this.series;
                          var data = ser.data;
                            $.each(data, function(){
                                this.setState("hover")
                            });
                        },
                        mouseOut: function(){
                          var ser = this.series;
                          var data = ser.data;
                            $.each(data, function(){
                                this.setState()
                            });      
                        }
                    }
                }
            }
          },

Note that these lines:

            states:{
               normal: {
                    animation: false
                }
            },

are there to prevent the "un-hovering" aniamtion highcharts automaticly applies.

Please take a look: http://jsfiddle.net/uwh7Lgyo/6/

On the other hand, you can set your own hover color: When setting the state to hover, highcharts will take the color defined for the series` hover state, for example:

series:{
    .....
    .....
    states:{
      hover:{
         color: 'red'
      }
    }
}

The above will color the point in red when state "hover" is triggerd.

See in this example iv'e created: http://jsfiddle.net/uwh7Lgyo/5/

Upvotes: 1

Related Questions