tic tic - 12 days ago 6
Javascript Question

Highcharts: how to change line color when hovering a scatterplot series

I have a Highcharts scatterplot. Some details of the chart object are below:

plotOptions: {
scatter: {
lineWidth:1,
marker: {
radius: 1,
symbol:'circle',
fillColor: '#800000',
states: {
hover: {
enabled: true,
radius:0,
radiusPlus:2,
lineColor: '#ff0000',
fillColor: '#ff0000'
}
}
},
states: {
hover: {
halo:false,
lineWidthPlus:2,
}
}
}
}


and the full working example is here.
I need to change the line color when hovering the series, but I am unable to do it. Is this possible?

Answer

This can be easily achieved with events.

All you need is to update the series color property when user hovers on a series

events: {
    mouseOver: function () {

        this.chart.series[this.index].update({
             color: 'red'
        });
    },
    mouseOut: function () {

        this.chart.series[this.index].update({
            color: "#b0b0b0"
        });                           
     }
 }

This will change the color of the series of which the point is hovered.

here is update to your fiddle

Hope This has helped you.