I have a server side UI that responds to whether I want to show a chart, table, or both. The size of the boxes are determined by whether one (width = 12) or both (width = 6) are selected to be shown. This function works as expected.
The problem is that the plotly plot size doesn't change when the box size changes. It retains the width of whatever condition is first loaded: if I start with only the plot box enabled, the chart fills the width 12 box, but when the table box is added and the plot box is reduced to width 6, the plot width is unchanged and extends beyond the box, running into the table box. Conversely if I start with the table box and then enable the plot box, then disable the table box so the plot box expands, the width of the plot is only half of the wider box.
How can I get the plotly plot width to correctly adjust to fill the box when the box size changes? One solution I can see is to force re-rendering the plot when the box toggles change state, but that seems cumbersome and slows down the app.
Here is the dynamic UI component:
make_boxes <- reactive({
if(input$chart_toggle & !input$table_toggle) {
fluidRow(box(title = "Chart",
width = 12,
collapsible = F,
collapsed = F,
plotlyOutput("plotly_plot")
))
} else if(input$table_toggle & !input$chart_toggle) {
fluidRow(box(title = "Table",
width = 12,
collapsible = F,
collapsed = F,
DTOutput("table")
))
} else if(input$table_toggle & input$chart_toggle) {
fluidRow(
box(title = "Chart",
width = 6,
collapsible = F,
collapsed = F,
plotlyOutput("plotly_plot")
),
box(title = "Table",
width = 6,
collapsible = F,
collapsed = F,
DTOutput("table")
)
)
}
})
output$ui_boxes <- renderUI({
make_boxes()
})
And here is the plot:
output$plotly_plot <- renderPlotly({
p1 <- filt_pw() %>%
ggplot(aes(x = num, y = max_limit, fill = type)) +
geom_col(position = position_dodge2(preserve = "single"))
ggplotly(p1, ) %>%
layout(autosize = T)
})
Here is the relevant UI portions:
library(shinydashboard)
dashboardPage(
dashboardSidebar(
h2("Filters"),
switchInput(
label = "Chart",
inputId = "chart_toggle",
value = FALSE
),
switchInput(
label = "Table",
inputId = "table_toggle",
value = FALSE
)
),
dashboardBody(
uiOutput("ui_boxes")
)
)