1

I am using the R package {highcharter} to make a plot similar to this highchart steamgraph.

So far, no major issues. However, I cannot replicate the nice fade animation which occurs with hovering the tooltip.

Bottom line: When I hove over a series, I want the other (inactive) series to fade.

Here is an example of my highcharter plot. 

highchart() %>%
  hc_chart(type = "area", zoomType = "x") %>%
  hc_title(text = "Steamgraph of groups") %>%
  hc_xAxis(categories = c("1", "2", "3", "4", "5", "6", "7", "8", 
"9", "10"), 
       tickmarkPlacement = "on", 
       title = list(enabled = FALSE), 
       crosshair = TRUE, 
       labels = list(align = "left", reserveSpace = FALSE, rotation = "270"), 
       lineWidth = 0, 
       margin = 20, 
       tickWidth = 0) %>%
  hc_yAxis(title = list(text = "count"), 
       visible = FALSE) %>%
  hc_legend(enabled = FALSE) %>%
  hc_plotOptions(series = list(
states = list(
  inactive = list(
    opacity = 0.5
  )
)
)
) %>%
hc_add_series(name = "Group 1", 
            type = "streamgraph", 
            data = c(10, 49, 30, 22, 14, 6, 4, 7, 49, 48))  %>%
hc_add_series(name = "Group 2", 
            type = "streamgraph", 
            data = c(54, 12, 82, 42, 12, 6 ,23, 35, 15, 66))

I have tried to adjust the plotOptions but with no success.

Is there a different place to add this parameter?

Thanks

mdb_ftl
  • 423
  • 2
  • 14
  • Emmmm, I think it works fine. When I hover over the series, the other series fades. Change opacity from 0.5 to 0.1 to see a bigger difference. Am I missing something? – raf18seb Feb 10 '20 at 09:56
  • Not sure why, but the same code not working for me. Does not work in rstudio preview, nor when I view on chrome or edge. I adjusted the opacity level as you suggested, even down to 0.0001, and still no difference. I have tried on two different systems as well (windows and mac). Can't seem to figure out why it isn't working. – mdb_ftl Feb 10 '20 at 14:13
  • 2
    I am using RStudio, see the screenshot: https://imgur.com/a/mo91SkS The inactive state was added to Highcharts in 7.1.0. The newest Highcharter uses 7.2.0 now, but maybe you are loading the older version? See https://stackoverflow.com/questions/56185382/how-to-get-series-highlight-on-hover-in-highcharter – raf18seb Feb 10 '20 at 14:38
  • You were correct - i installed the development version of highcharter and everything working now - thanks – mdb_ftl Feb 11 '20 at 03:22
  • how can we install the development version of `highcharter`, my bad its in the docs (https://github.com/jbkunst/highcharter) – Laurence_jj Feb 18 '20 at 13:03

1 Answers1

2

Your code is working fine. The inactive state was added to Highcharts in 7.1.0. The newest Highcharter uses 7.2.0 (11th February 2020), but you are probably using the older version which doesn't provide inactive state.

raf18seb
  • 2,096
  • 1
  • 7
  • 19