How do I remove the blankspace / white margin in RStudio viewer pane for plotly plots

Question

When I create a plot in the RStudio viewer pane with plotly, I am left with a large white margin around the plot. This is normally fine, but not when using a non-standard color scheme. Moreover, this white margin seems to also exist when the image is exported, or generated in RMarkdown etc.

Does anyone know of a way to remove this?

Here is some example code to demonstrate:

library(plotly)

month <- c('January', 'February', 'March', 'April', 'May', 'June', 'July',
           'August', 'September', 'October', 'November', 'December')
high_2014 <- c(28.8, 28.5, 37.0, 56.8, 69.7, 79.7, 78.5, 77.8, 74.1, 62.6, 45.3, 39.9)
low_2014 <- c(12.7, 14.3, 18.6, 35.5, 49.9, 58.0, 60.0, 58.6, 51.7, 45.2, 32.2, 29.1)
data <- data.frame(month, high_2014, low_2014)
data$average_2014 <- rowMeans(data[,c("high_2014", "low_2014")])

#The default order will be alphabetized unless specified as below:
data$month <- factor(data$month, levels = data[["month"]])

plot_ly(
  data
  ,x = ~month
  ,y = ~high_2014
  ,type = 'scatter'
  ,mode = 'lines'
  ,line = list(color = 'rgba(0,100,80,1)')
  ,showlegend = FALSE
  ,name = 'High 2014'
)%>%
  add_trace(
    y = ~low_2014
    ,type = 'scatter'
    ,mode = 'lines'
    ,fill = 'tonexty'
    ,fillcolor='rgba(0,100,80,0.2)'
    ,line = list(color = 'rgba(0,100,80,1)')
    ,showlegend = FALSE
    ,name = 'Low 2014'
  )%>%
  layout(
    title = "High and Low Temperatures in New York"
    ,paper_bgcolor='navy'
    ,plot_bgcolor='rgb(229,229,229)'
    ,bgcolor = "black"
  )

Thanks, Tom

The colour of the border is a style attribute of the body of the document. You could change that to blue instead of white, and the border would disappear. Your whole document would change to blue, so you might not want that. You could also change the `top`, `bottom`, `left` and `right` style attributes to `0px` instead of the default `15px`. This page: https://stackoverflow.com/questions/35720698/is-it-possible-to-include-custom-css-in-htmlwidgets-for-r-and-or-leafletr describes how to do that. — user2554330, Dec 11 '17 at 12:18

score 2 · Answer 1 · answered Dec 11 '17 at 12:18

2

You could try an approach similar to the one here: Paper border on plotly R graph

Find the location of your directory storing the plotly-min.js and the CSS file
```
p <- plot_ly()
p$dependencies[[4]]$src$file
```
Output:

1 "/that/is/my/directory/Documents/R/win-library/3.4/plotly/htmlwidgets/lib/plotlyjs"
Copy plotly-htmlwidget.css to another file, e.g. plotly-htmlwidget_NoBorder.css

Add the following lines to the new file

body{
  padding: 0px !important;
}

#htmlwidget_container{
  top: 0px !important;
  bottom: 0px !important;
  right: 0px !important;
  left: 0px !important;
}

Put your plotly graph in a variable p
```
p <- plot_ly()
```

Overwrite the CSS for this graph

p$dependencies[[4]]$stylesheet = "plotly-htmlwidgets_NoBorder.css"

answered Dec 11 '17 at 12:18

Maximilian Peters

30,348
12
86
99

Isn't there a way to add this to the object itself, without editing the overall style sheet? – user2554330 Dec 11 '17 at 15:59
I tried the approach suggested in the link you posted but didn't succeed, perhaps I should give it another shot. – Maximilian Peters Dec 11 '17 at 16:45
I also tried unsuccessfully, but I rarely use CSS so I wasn't sure how to track down where the error was. Another link I tried unsuccessfully is this one: http://www.buildingwidgets.com/blog/2016/9/7/custom-styling-for-htmlwidgets, but I think the issue here is that the style information gets added inside the DOM object it is trying to affect. – user2554330 Dec 11 '17 at 18:22
It seems we googled the same keywords, the only robust way I found was too manipulate the CSS file. – Maximilian Peters Dec 11 '17 at 18:29

score 2 · Answer 2 · answered Feb 22 '19 at 22:27

The padding is coming from the default option in htmlwidgets. It can be overriden by altering the sizing policy on the plot widget object. See ?htmlwidgets::sizingPolicy for documentation of all options. This will eliminate the padding for all viewer types:

p <- plot_ly()
p$sizingPolicy$padding <- "0"

How do I remove the blankspace / white margin in RStudio viewer pane for plotly plots

2 Answers2