alternative way to change hovered series and its points properties in a HighCharts chart

Question

I have a line chart with a lot of series and I need to change the color of the hovered series and all its points.

A suggested approach is to use mouseOver and mouseOut events, and inside them run a .update method for the series and .setState method for all its points.

Unfortunately in my case this solution turns out to be laggy, so I've tried to avoid it.

I was able to change the color of the series without using .update methods, setting this.graph.stroke property, but I was unable to find a corresponding changeable property for its points: .graphic.stroke property seems to not be the right one (I've navigated through the series and points object through Firefox Developer tools).

JSfiddle relevant code:

        events: {
            mouseOver: function() {
              originalColor = this.color;
              this.graph.stroke="rgb(255,0,0)";
              this.points.forEach(p => p.graphic.stroke="rgb(255,0,0)}");
              //this.data.forEach(p => p.setState('hover'))
            },
            mouseOut: function() {
              this.graph.stroke=originalColor;
              this.points.forEach(p => p.graphic.stroke=originalColor);
              //this.data.forEach(p => p.setState())
            }
        }
    },
},

P.S.: the commented lines work but with a lot of series and points they run more slowly than this.graph.stroke=... so the change for points color appears not synchronized with that of series line.

So, my question is: which property of series.points can I access to change the color immediately?

Answer 1

Disable series states and use attr method to change stroke and fill colors:

plotOptions: {
    series: {
        states: {
            hover: {
                enabled: false
            },
            inactive: {
                enabled: false
            }
        },
        events: {
            mouseOver: function() {
                this.graph.attr({
                    stroke: "rgb(255,0,0)"
                });
                this.points.forEach(p => p.graphic.attr({
                    fill: "rgb(255,0,0)"
                }));
            },
            mouseOut: function() {
                this.graph.attr({
                    stroke: this.color
                });
                this.points.forEach(p => p.graphic.attr({
                    fill: this.color
                }));
            }
        }
    },
},

Live demo: https://jsfiddle.net/BlackLabel/dnr93Law/

API Reference:

https://api.highcharts.com/highcharts/series.line.states

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr