Change shape color in Highmaps programmatically

Question

I have a map made with Highmaps library, made up of two series: admin boundaries and cities. On its side there is a list of all the admins, and on each of this item there is a mouse hover event attached. I'm trying to highlight without selecting the relative shape on the map when the mouse is over the admin text. I've been able to make it with the select function of highmaps, but I can't use it anymore as I've also enable multiselection and I'm using it for other purposes.

So what I'm trying to do is to manually/programmatically change the color of a particular point in the series.

here is the code executed in the mouseover event on the list item

$( "ul#admins li" ).mouseover(function() {
   var adminCode = $(this).attr('id')); //retrieve the adminCode
   var chart = $('#mapContainer').highcharts();
   for (var i = 0; i < chart.series[0].data.length; i++) {
       if (chart.series[0].data[i].Code == adminCode) {
           //I've got the map element to highlight...
           //..but how I can do change its color?

           //before I was using this method, selecting directly, but now
           //I don't want to select it, only change its color.
           chart.series[0].data[i].select(true, false);
           break;
       }
   }
});

Answer 1

You should be able to use Point.update() for changing the color of specific country in your map:

function(chart) {
    $('.btn').click(function() {
      chart.series[1].data[0].update({
        color: 'red'
      })
    })
}

For example here I am changing the color of first point from your map series.

Here you can see an example how it can work: http://jsfiddle.net/x14dm93u/