Alternative Way To Change Hovered Series And Its Points Properties In A Highcharts Chart

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

Solution 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