Is there a way to highlight the legend of a dygraph in R

Question

The problem can be seen in any multiple variable plot of dygraph when the colors are close to each other, and especially if you are like me who is not very good in identifying small differences in colours (my wife can do a much better job than me).

The best way is to see the picture of a dygraph and the mouse pointed on any one line. As you can see the colours of variable z and short are very close to green.

Is there a way to highlight (with say a rectangle) around the pointed series on the legend as well. I know we can use dyHighlight() to highlight the data series.

If someone wants to replicate the dygraph here is the data and code.

Here is a data.frame (of just 10 rows) in dput format.

structure(list(ts = structure(c(1636488540L, 1636488600L, 1636488660L, 
1636488720L, 1636488780L, 1636488840L, 1636488900L, 1636488960L, 
1636489020L, 1636489080L, 1636489140L), class = c("POSIXct", 
"POSIXt"), tzone = ""), x = c(-1.47069335096148, -3.36409786063375, 
-3.47740281050692, -0.255068206704506, 5.22759893683639, -10.3043374092728, 
-5.2344716901776, -9.78183898579815, -3.22880795465383, 10.605420513646, 
-3.89232017758796), y = c(-43.384448866304, -46.7485467269378, 
-50.2259495374447, -50.4810177441492, -45.2534188073128, -55.5577562165856, 
-60.7922279067632, -70.5740668925614, -73.8028748472152, -63.1974543335692, 
-67.0897745111571), z = c(-137.821501091824, -132.046751108584, 
-140.358945130686, -147.455514008532, -145.960386088907, -151.292192768048, 
-161.603402930662, -186.92405101591, -205.16916964654, -207.574396073346, 
-204.090103691941), fuel = c(852.178498908176, 857.953248891416, 
849.641054869314, 842.544485991468, 844.039613911093, 838.707807231952, 
828.396597069338, 803.07594898409, 784.83083035346, 782.425603926654, 
785.909896308058), delta = c(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), 
    short = c(-8.8926709311977, 6.5109558655754, 5.24159847904127, 
    -3.34476928169295, -8.13888499708287, -19.2454416594633, 
    -21.2444577999751, -39.4685370073786, -59.2087835576331, 
    -56.2822033052981, -42.48670076128), long = c(-178.435062392844, 
    -179.31344224667, -187.306132052743, -185.62097109537, -176.874913772529, 
    -172.952666784266, -167.386770377762, -184.70364909417, -196.140010827552, 
    -194.056786969029, -182.415749904105)), row.names = c(NA, 
-11L), class = "data.frame")

Run the code

library(data.table)
library(magrittr)
library(dygraphs)

# assign the above data to an R object say dputvar - note it is just 10 rows.
# you will not see the same rich chart as in the picture but the problem can be replicated in these 10 lines also

as.data.table(dputvar) %>% 
dygraph() %>% 
dySeries(name = "fuel",strokeWidth = 3) %>% 
dyHighlight()

user_4130044 · Answer

Isn't it better if you select your own set of colours so that they are distinct and not similar to one another? Something like this:

mydygraph <- dygraph(as.data.table(dputvar))
for (i in c('red', 'blue', 'green', 'yellow', 'brown', 'black', 'purple')) {
 mydygraph <- dySeries(a, strokeWidth = 3, color = i)
}
mydygraph

This way you can choose distinct colours. You can add colours in the following formats: "#AABBCC" or "rgb(255,100,200)" or "yellow". You can read more at ?dySeries.

user_5913922 · Answer

While the answer with distinct colours might satisfy you. I will still provide an answer to your initial question for the benefit of others who came here with the same issue.

You cold achieve legend highlight with dyCSS and dyHighlight:

dygraph(dat) %>%
  dyHighlight(highlightSeriesOpts = list(strokeWidth = 3)) %>%
  dyCSS(textConnection("
     .dygraph-legend > span.highlight { display: inline; background-color: #B0B0B0;}
  "))

Here dygraph-legend says that we want to modify the legend. span.highlight to modify the highlighted series. background-color: #B0B0B0; modification to the background colour.

You could also just hide all legends except the highlighted ones:

dygraph(dat) %>%
  dyHighlight(highlightSeriesOpts = list(strokeWidth = 3)) %>%
  dyCSS(textConnection("
     .dygraph-legend > span { display: none; }
     .dygraph-legend > span.highlight { display: inline}
  "))

Is there a way to highlight the legend of a dygraph in R

2 Answers