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

Question

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?

score 3 · Accepted Answer · answered Jan 03 '16 at 18:05

3

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.

answered Jan 03 '16 at 18:05

Strikers

4,698
2
28
58

Am I the only one experiencing a "flickering" when hovering between the two series and having this code as well? – Halvor Holsten Strand Jan 03 '16 at 22:16
1

@HalvorStrand is sticky tracking disabled?? it is enabled by default. If you have multiple series and they run through same xAxis points, I advice to disable sticky tracking. – Strikers Jan 04 '16 at 05:23

score 1 · Answer 2 · answered Nov 25 '16 at 20:19

Thank you strikers

@HalvorStrand is sticky tracking disabled?? it is enabled by default. If you have multiple series and they run through same xAxis points, I advice to disable sticky tracking. – strikers Jan 4 at 5:23

i was struggling with this until i put this after plotoptions series: {stickyTracking: false}, problem solved

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

2 Answers2

Linked