Controlling the background color of outside margin area (oma) in ggplotly rendered in Shiny

[kate1]

Hi all -
I am making a minimalist graph in Shiny using ggplotly, and I'd like the background of the whole page to be black (#000000).
I've managed to set the background color of all the elements, but when I render the ggplotly graph, the outside margin area is white. The reprex below shows what I mean. I've tried fiddling with 1) par(mar), 2) par(oma), and 3) plot.margin, all with no luck. Maybe I'm using them wrong.
Any suggestions for how to turn that area black? Thanks so much.

# Setup

library("ggplot2")
library("tidyverse")
library("plotly")
#> 
#> Attaching package: 'plotly'
#> The following object is masked from 'package:ggplot2':
#> 
#>     last_plot
#> The following object is masked from 'package:stats':
#> 
#>     filter
#> The following object is masked from 'package:graphics':
#> 
#>     layout
library("shiny")
library("shinyWidgets")
library("reprex")

# Toy dataset

x <- c(1,2,3,4,5)
y <- c(52,49,19,15,31)
mytext <- c("A","B","C","D","E")
toydataset <- data.frame(x,y,mytext)

# App

ui <- fluidPage(
    setBackgroundColor("#000000"),
    fluidRow(column(12, h3("Some title text here", 
                    style = {"color:white; margin-left:15px; font-weight:bold"}
        ))),
    fluidRow(
        column(12,
               style="background-color:#000000",
               plotlyOutput('plot', height="auto", width="auto")
       )))
server <- function(input, output) {
    output$plot <- 
        renderPlotly({
            a <-    ggplot() + 
                    theme(legend.position = "none",
                          panel.grid = element_line(color = "#000000"),
                          axis.title = element_blank(),
                          axis.text  = element_blank(),
                          axis.ticks = element_blank(),
                          panel.background = element_rect(fill = "#000000", color = "#000000")
                          )  +
                     geom_point(data = toydataset, 
                           aes(x=x, y=y, text=mytext),
                           color = "white"
                           )
            ggplotly(a,
                     height=600,
                     tooltip = "mytext")
        })  
}  

shinyApp(ui = ui, server = server)

Shiny applications not supported in static R Markdown documents

^{Created on 2019-12-15 by the reprex package (v0.3.0)}

[woodward]

I'm guessing you need to add some css code in your ui. Shiny can't control all features of the ui and sometimes you need to provide css or html or javascript to get the extra things you need.

Change Background Color of Shiny App-- CSS

[kate1]

Thank you, Woodward. I actually played with those CSS options quite a bit, and have already looked at the solution you linked to. Those options don't seem to get at the border area I'm trying to change. Here's a screenshot of those options set to blue and orange through the UI:

I think the issue seems to be some setting within ggplotly. The collection of small controls in the upper right of the white frame are from ggplotly, not Shiny. When I render this graph with ggplot2, I can manage the white margin using the plot.margin setting. But it doesn't work with ggplotly, and I can't find the answer in the ggplotly documentation. Hmm.

Any further help would be much appreciated. Thanks.

[izahn]

You can use theme to set the plot.background to black:

        theme(legend.position = "none",
              panel.grid = element_line(color = "#000000"),
              axis.title = element_blank(),
              axis.text  = element_blank(),
              axis.ticks = element_blank(),
              panel.background = element_rect(fill = "#000000", color = "#000000"),
              plot.background = element_rect(fill = "#000000", color = "#000000")

[kate1]

Yay! That worked perfectly! Thanks so much, Ista