I have an R shiny app and I am trying to display four plot_ly guage plots in them but I seem to have some stubborn space underneath each plot which I cannot work out how to get rid of. The have white space which extends below the fluid row height.
This is the code. I have tried fixing the height at 100% in various places but they all seem to include space below the plot. ideally I would like the guage to take up 100% of the height of the fluid row and the fluid row not to have a defined height at all so it scales with the window, but whatever I seem to try it stays with a space below it which is visiable if I colour everything grey.
This is the relevant code:
main_content_MATDetail <- mainPanel(
fluidRow(
style = "background-color: #f0f0f0; height:200px",
column(3, plotlyOutput("OAGuage", height="100%") %>% withSpinner(color = "#12436D")),
column(3, plotlyOutput("UAGuage") %>% withSpinner(color = "#12436D")),
column(3, plotlyOutput("AAGuage") %>% withSpinner(color = "#12436D")),
column(3, plotlyOutput("PAGuage") %>% withSpinner(color = "#12436D"))
)
)
ui <- fluidPage(
tabsetPanel(
id = "main_tabs",
tabPanel("Details ",
titlePanel(div("Details", style = "font-size:18px;")),
main_content_MATDetail
))
) #end of fluid page
server <- function(input, output, session){
count_more<-9
count_less<-17
denominator<-(count_more+count_less)
prop_better <- (100 * count_less/denominator)
output$OAGuage <- renderPlotly({
fig <- plot_ly(
domain = list(x = c(0, 1), y = c(0, 1)),
value = prop_better,
title = list(text = "A"),
type = "indicator",
gauge = list(
bar = list(
color = case_when(
prop_better >= 75 ~ "green",
prop_better >= 50 & prop_better < 75 ~ "orange",
TRUE ~ "red"
)
),
axis = list(range = list(0, 100),
tickvals = c(0, 25, 50, 75, 100),
ticktext = c("0", "25", "50", "75", "100"))
),
mode = "gauge+number"
)
fig <- fig %>%
layout(
margin = list(l=0,r=0),
paper_bgcolor = "#f0f0f0",
font = list(color = "darkblue", family = "Arial"))
})
output$AAGuage <- renderPlotly({
fig <- plot_ly(
domain = list(x = c(0, 1), y = c(0, 1)),
value = prop_better,
title = list(text = "B"),
type = "indicator",
color="black",
# plot_bgcolor = "#f0f0f0",
gauge = list(
# bar = list(color = "darkblue"),
# bgcolor = "#f0f0f0",
bar = list(
color = case_when(
prop_better >= 75 ~ "green",
prop_better >= 50 & prop_better < 75 ~ "orange",
TRUE ~ "red"
)
),
axis = list(range = list(0, 100),
tickvals = c(0, 25, 50, 75, 100),
ticktext = c("0", "25", "50", "75", "100"))
),
mode = "gauge+number"
)
fig <- fig %>%
layout(
margin = list(l=0,r=0),
height="100%",
paper_bgcolor = "#f0f0f0",
font = list(color = "darkblue", family = "Arial"))
})
output$UAGuage <- renderPlotly({
fig <- plot_ly(
domain = list(x = c(0, 1), y = c(0, 1)),
value = prop_better,
title = list(text = "C"),
type = "indicator",
color="black",
# plot_bgcolor = "#f0f0f0",
gauge = list(
# bar = list(color = "darkblue"),
# bgcolor = "#f0f0f0",
bar = list(
color = case_when(
prop_better >= 75 ~ "green",
prop_better >= 50 & prop_better < 75 ~ "orange",
TRUE ~ "red"
)
),
axis = list(range = list(0, 100),
tickvals = c(0, 25, 50, 75, 100),
ticktext = c("0", "25", "50", "75", "100"))
),
mode = "gauge+number"
)
fig <- fig %>%
layout(
margin = list(l=0,r=0),
paper_bgcolor = "#f0f0f0",
font = list(color = "darkblue", family = "Arial"))
})
output$PAGuage <- renderPlotly({
fig <- plot_ly(
domain = list(x = c(0, 1), y = c(0, 1)),
value = prop_better,
title = list(text = "D"),
type = "indicator",
color="black",
gauge = list(
bar = list(
color = case_when(
prop_better >= 75 ~ "green",
prop_better >= 50 & prop_better < 75 ~ "orange",
TRUE ~ "red"
)
),
axis = list(range = list(0, 100),
tickvals = c(0, 25, 50, 75, 100),
ticktext = c("0", "25", "50", "75", "100"))
),
mode = "gauge+number"
)
fig <- fig %>%
layout(
margin = list(l=0,r=0),
paper_bgcolor = "#f0f0f0",
font = list(color = "darkblue", family = "Arial"))
})
}
##################################SHINY APP
shinyApp(ui = ui, server = server)
Any help would be gratefully receieved.
If you want a scalable fluid row height, you have to use the
vhCSS unit (percentage of the height of the viewport). Then you can useheight="100%"inplotlyOutput. But there are other containers of theplotlyOutputs: the column and the div for the spinner, you have to set their height to 100% as well, and for the div, you need to resort to CSS.