Change series point colour on hover

Question

I am trying to get the points on my graph in a particular series to change colour when the any point in the series is hovered over. ie hovering over a point in series 1 makes all points in series 1 change colour (and are hence highlighted).

This is made a little more difficult as I initially colour the points based on their value.

I tried to adapt the answer from highcharter change highlight color on hover , but it doesnt seem to be working with points that have been coloured in as they do not change on hover.

library(highcharter)
library(data.table)
library(dplyr)

# generate data
data = data.table(
  CJ(x = seq(as.Date("2019-01-01"), as.Date("2019-01-10"), by = "day"),
     group = seq(1,2))
)
data[, value := round(runif(n=20, -5,5),4)]

# color points based on value
data = data.table(data %>% mutate(cat=cut(value, breaks=quantile(data[value!=0]$value, seq(0,1,0.1)), labels=seq(1,10))))
colf = colorRampPalette(colors = c("red","yellow", "green"))
cols = colf(10)
data[, color := as.factor(cols[cat])]

# get point position
data$x = datetime_to_timestamp(data$x)
data = data.table(data %>% group_by(x) %>% mutate(y = order(order(value))-sum(value<0,na.rm=T)))

# plot data
highchart() %>%
  hc_xAxis(type = "datetime", dateTimeLabelFormats = list(day = '%d of %b')) %>%
  hc_add_series(data[group==1], name = "group 1", marker = list(symbol = fa_icon("circle"))) %>%
  hc_add_series(data[group==2], name = "group 2", marker = list(symbol = fa_icon("circle"))) %>%
  hc_chart(type = "scatter") %>%
  hc_tooltip(pointFormat = "Performance = <b>{point.value}</b> <br> Group = <b>{point.name}</b>") %>%
  # hover over part
  hc_plotOptions(
    series = list(
      stickyTracking = FALSE,
      events = list(
        mouseOver = JS("function() { if(this.options.color !== 'red') {this.update({color: 'red'})} }"),
        mouseOut = JS("function() { if(this.options.color === 'red') {this.update({color: '#ddd'})} }")
      ),
      states = list(
        hover = list(
          enabled = TRUE,
          lineWidth = 10
        )
      )
    ))

The graph:

Answer 1

You can use Inactive State: https://api.highcharts.com/highcharts/series.scatter.states.inactive

It's been included in Highcharts since 7.1.0 and enabled by default so all you need to do is to make sure that you are using the newest Highcharter.

Here you have an example of it: https://jsfiddle.net/BlackLabel/2wu3jrmt

Highcharts.chart('container', {

  chart: {
    type: 'scatter'
  },

  series: [{
    data: [4, 3, 5, 6, 2, 5]
  }, {
    data: [2, 5, 3, 7, 3, 1]
  }, {
    data: [1, 1, 6, 3, 4, 3]
  }]

});