1

I would like to have a border around my entire dygraphs plot, encompassing the title, axis labels, legend, etc. After searching, I think I should be able to use the underlayCallback option to do this, but I cannot find an example, and am very new to dygraphs. Can anyone point me to an example I've missed, or provide me with a bit of general code to draw the border? I have some plots drawn with ggplot2 (non-interactive), and want my dygraphs to look similar. Many thanks!

CJ9
  • 91
  • 1
  • 6
  • Welcome to SO! It would be helpful to others (not necessarily the folks who can help you) if you provide working source code to generate a dygraph plot (even a basic one). That way even folks who do help you do not have to generate one from scratch. Here's [more info](http://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example) on providing reproducible examples. – hrbrmstr Oct 19 '15 at 12:51
  • @hrbrmstr Thank you. I usually try to do this, but thought this was probably a SUPER basic question that someone more "skilled in the art" would just have handy. – CJ9 Oct 19 '15 at 13:03
  • Roger that. I additionally point it out since some folks use answering questions to learn how to code in R (which is one reason I edit questions: to make it easier for them copy/paste working code). I do agree that you would have only ended up pasting 3 lines of code and, perhaps, an image ;-) – hrbrmstr Oct 19 '15 at 13:06
  • @hrbrmstr It's a good point about providing a good example for others who are searching. Will do in the future. – CJ9 Oct 19 '15 at 13:13

1 Answers1

3

You can just use CSS for this:

library(dygraphs)

lungDeaths <- cbind(mdeaths, fdeaths)
writeLines("div[id^='htmlwidget_container'] { border:1px solid black; padding:10px}", 
           "my.css")
dygraph(lungDeaths, main="Title", xlab="X", ylab="Y") %>% 
  dyCSS("my.css") %>% 
  dyCallbacks(underlayCallback=JS("function(ctx, area, dygraph) {
                         ctx.strokeStyle = 'black';
                         ctx.strokeRect(area.x, area.y, area.w, area.h);
                     }"))

enter image description here

hrbrmstr
  • 77,368
  • 11
  • 139
  • 205
  • Thanks for this solution - works like a champ! I did +1 your answer, but don't have enough reputation points for it to show up. Two additional questions: (1) I didn't see "border" as a dygraphs CSS option, or I would have tried it. Did I miss it someplace, or...? (2) I didn't even know I could write lines to my CSS that way. However, it seems to overwrite everything else in there :( Anything I can do to avoid that? Thanks again! – CJ9 Oct 19 '15 at 13:10
  • ah, if you have an existing CSS file, just add that CSS rule to it. it's targeting the div with standard CSS styling rules (`border` is a property of many DOM objects). – hrbrmstr Oct 19 '15 at 13:15
  • Also...what about closing in the border around the graph itself (adding on to the x and y axes to create a complete box?) Or - do I need to create a separate question for this? – CJ9 Oct 19 '15 at 13:18
  • No, that's a gd q. Unfortunately, those aren't `
    ` elements with a simple half-completed border. The X & Y axes are made with `d3.svg.axis()`, so they are actually SVG lines. You'd have to do some serious post-dygraph SVG surgery to add the top and right lines in.
     – hrbrmstr Oct 19 '15 at 13:21
  • I'm glad I asked, instead of spending countless hours searching! I will just try to color the background grey instead - I think I saw some references for that. Thank you again for all your help, and the pointers. Especially so quickly! – CJ9 Oct 19 '15 at 13:24
  • Actually, I totally mis-spoke. I had NVD3 on the brain (I live in D3-land alot these days). It's even "worse" than SVG since dygraphs is ``-based, do you'd end up having to do the callback for that. Here's an example: http://jsfiddle.net/eM2Mg/280/ (I also updated the answer with the example). You may need to poke around for how to tweak the legend so it doesn't overwrite the border. – hrbrmstr Oct 19 '15 at 13:31