'R Shiny how to get the ggplotly/plotly object to change the width based on the screen?

I am struggling to show a plotly graph as expected in the laptop screen. With the current settings the plot is showing properly on the external screen that is wider. When viewing in the 13" laptop screen the plot width exceeds the box. In the ggplotly function I have set the height = 700, width = 1000. If I do not specify those parameters then the plot is too small in the external screen (less than half the with of the box). Is there a way so that the plot dynamically changes it's width to the width of the box no matter what screen the user has?

Plotly Object

output$drug_cleveland_plot = renderPlotly({
    
    df <- df_drug_plot()
    
    if (length(input$truven_med_history_drug_table_rows_selected)>2) {
      plot_title <- "Selected Drugs: Diagnosed vs Expected Proportion"
    } else {
      plot_title <- "Top 20 Drugs: Diagnosed vs Expected Proportion"
    }
    
    df <- sqldf("select distinct concept_name,w_cond_rate as rate,'Diagnosed' as grp from df 
                union
                select distinct concept_name,w_exp_rate as rate,'Expected' as grp from df
                ")
    
    df <- df %>% 
      arrange(rate) %>% mutate(grp = factor(grp)) %>%
      mutate(concept_name=factor(concept_name))
    
    p <- df %>%
      arrange(grp, rate, desc(concept_name)) %>%
      ggplot(aes(rate, fct_inorder(concept_name))) +
      aes(text = paste0(grp, " proportion: ", rate, "\n",
                        concept_name)) +
      geom_line(aes(group = concept_name)) +
      geom_point(aes(color = grp)) +
      scale_x_continuous(breaks = seq(0, 1.1, by = 0.1)) +
      theme_bw() + 
      theme(panel.grid.major.x = element_line( linetype = "dotted", size = 0.2, color = 'grey' ))  +
      scale_colour_manual(values=c("#d91e4a", "#939597")) + 
      theme (legend.title=element_blank())
    
    m <- list(
      l = 200,
      r = 100,
      b = 100,
      t = 100,
      pad = 5
    )
    
    fig <- ggplotly(p, height = 700, width = 1000, tooltip = c("text")) %>% layout(title = plot_title,
                                                                                  autosize = F, 
                                                                                  margin = m,
                                                                                  yaxis = list(title = "",
                                                                                               automargin = TRUE),
                                                                                  xaxis = list(title = "Proportion",
                                                                                               range = c(0,1),
                                                                                               dtick = 0.1,
                                                                                               tickmode = 'linear'),
                                                                                  legend = list(title=list(text='<b> Group </b>')))
    fig
    
    
  })

UI Side

box(column(5,DT::dataTableOutput("truven_med_history_drug_table")),
    column(7,actionButton("resetSelection_1", label = "Click to reset row selection" ,class = "btn-light"),
           plotlyOutput("drug_bar_distr_plot",height = 600)),
    column(12,hr()),
    column(12, box(
      title = "Expected vs Observed Proportion for target population (expand to see the plot)",
      status = "primary",
      collapsible = TRUE, collapsed = TRUE, plotlyOutput("drug_cleveland_plot", height = 700), width = "100%",align = "center"
    )),
    column(12,box(
      title = "Expected vs Observed Proportion Odds Ratio (expand to see the plot)",
      status = "primary",
      collapsible = TRUE, collapsed = TRUE, plotOutput("drug_forest_plot", height = 700), width = "100%"
    )),
    column(12,box(
      title = "Drug Utilization",
      status = "primary",
      collapsible = TRUE, collapsed = TRUE, DT::dataTableOutput("truven_med_history_drug_era_table")
    )),
    width = "100%")

enter image description here

External wide screen enter image description here

Height and Width as % in plotlyoutput()

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source