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?