Center plotly plot in R shiny

Question

I would like for the 3 donut charts in the following application to be centered within their div, but they are all right-aligned. When changing the width of the browser window (Safari on macOS), they are centered as I would like them to, but not when the page loads initially.

any ideas how the 3 charts can always be centered above the title shown below them?

library(shiny)
library(plotly)

# Define UI for application
ui <- navbarPage("Home",                     
                 tabPanel("Tab1",
                          tags$style(type="text/css",
                                     "h3 { text-align:center; }"
                 ),
                          fluidRow(
                              column(4,
                                     h2(plotlyOutput("plot1", height = "100%")),
                                     h3("Score")
                              ),
                              column(4,
                                       h2(plotlyOutput("plot2", height = "100%")),
                                       h3("Score")
                              ),
                              column(4,
                                     h2(plotlyOutput("plot3", height = "100%")),
                                     h3("Score")
                              )
                          )
                     )
)

# Define server logic
server <- function(input, output) {

   output$plot1 <- renderPlotly({

       iScore <- sample(70:100, 1)

       plot_ly(width = 150, height = 150,
               marker = list(colors = c("#65b146", "rgba(0,0,0,0)"))) %>%
           add_pie(values = c(iScore, 100 - iScore),
                   hole = .7,
                   textposition = 'none') %>%
           layout(autosize = TRUE,
                  xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  showlegend = FALSE,
                  annotations = list(text = paste0("<b>",iScore,"</b>"),
                                     align = "center",
                                     font = list(size = 24),
                                     showarrow = FALSE)) %>%
           config(displayModeBar = F)
   })

   output$plot2 <- renderPlotly({

       iScore <- sample(70:100, 1)

       plot_ly(width = 150, height = 150,
               marker = list(colors = c("#65b146", "rgba(0,0,0,0)"))) %>%
           add_pie(values = c(iScore, 100 - iScore),
                   hole = .7,
                   textposition = 'none') %>%
           layout(autosize = TRUE,
                  xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  showlegend = FALSE,
                  annotations = list(text = paste0("<b>",iScore,"</b>"),
                                     align = "center",
                                     font = list(size = 24),
                                     showarrow = FALSE)) %>%
           config(displayModeBar = F)
   })

   output$plot3 <- renderPlotly({

       iScore <- sample(70:100, 1)

       plot_ly(width = 150, height = 150,
               marker = list(colors = c("#65b146", "rgba(0,0,0,0)"))) %>%
           add_pie(values = c(iScore, 100 - iScore),
                   hole = .7,
                   textposition = 'none') %>%
           layout(autosize = TRUE,
                  xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE),
                  showlegend = FALSE,
                  annotations = list(text = paste0("<b>",iScore,"</b>"),
                                     align = "center",
                                     font = list(size = 24),
                                     showarrow = FALSE)) %>%
           config(displayModeBar = F)
   })
}

# Run the application 
shinyApp(ui = ui, server = server)

HubertL HubertL · Accepted Answer · 2017-03-20T20:41:22

To embed your plot in a div, you should use div() instead of h2(), and to center, just specify its align="center" parameter:

div(plotlyOutput("plot1", height = "100%"), align = "center")

Center plotly plot in R shiny

1 Answers