Highcharts: changing color on hover ranking chart

Question

Right now I'm working on a ranking chart since I'm trying to highlight one serie, all others must be still on the chart but dimmed.

So I'm trying to change color on mouse over for the dimmed series, this helped me a lot Highcharts - change series color on MouseOver but I don't know how to handle the markers color because the function in mouseOver this.graph.attr('stroke', '#0000FF'); changes only the line color. Looking for "hover" in highcharts docs found this

    marker: {
        fillColor: '#C0C0C0',
        states: {
            hover: {
                fillColor: '#0000FF'
            }
        }
    }

My question is if there is a way to change the hole series color of the hovered series in the mouseover function, right now is working here http://jsfiddle.net/diegomanule/UyF9u/

Thanks in advance,

Answer 1

You shouldn't directly manipulate the SVG if you don't have to (and in this case you don't have to). Borrowing from this documentation examaple:

   events: {
        mouseOver: function () {
            this.update({
                color: '#0000FF'
            });                
        },
        mouseOut: function () {
            this.update({
                color: '#C0C0C0'
            }); 
        }
    },

Updated fiddle here.