0

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?

Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
tic
  • 4,009
  • 15
  • 45
  • 86

1 Answers1

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Perfect, thanks. Do you know how I can access `dataLabels` in the same way? `this.dataLabels.forEach` does not work. – tic Apr 29 '19 at 03:31
  • Hi @tic, You can access `dataLabels` through points: https://jsfiddle.net/BlackLabel/r573kqbf/ – ppotaczek Apr 29 '19 at 07:31
  • Sorry, I've used the word access but I did mean write. How can I set the dataLabel color? – tic Apr 30 '19 at 20:33
  • Please see my new question: https://stackoverflow.com/questions/55933474/change-datalabels-color-in-a-highcharts-chart-when-hovering-without-updating-the – tic May 01 '19 at 08:27
  • 1
    Hi @tic, You can change `dataLabels` color in similar way: https://jsfiddle.net/BlackLabel/myqpfs0L/ – ppotaczek May 02 '19 at 12:19