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

Question

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.

Answer 1

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/