Move plotlyOutput() to the server side in a shiny app

Question

I have a shiny dashboard in which I want to dynamically adapt both the graph and box height by using .js. The issue is that this happens only when I pass height argument inside plotlyOutput() and give it the input$GetScreenHeight which contains the height. But I get object 'input' not found. Can I pass just the plotlyOutput() to the server inside?

jscode <-
  '$(document).on("shiny:connected", function(e) {
  var jsHeight = screen.height;
  Shiny.onInputChange("GetScreenHeight",jsHeight);
});
'

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
    ),
    sidebar = dashboardSidebar(),

    body = dashboardBody(
      tags$script(jscode),
      boxPlus(
        title = "Closable Box with dropdown", 
        closable = TRUE, 
        width = NULL,
        status = "warning", 
        solidHeader = FALSE, 
        collapsible = TRUE,
        plotlyOutput("pl",height = input$GetScreenHeight)
      )
    )

  ),
  server = function(input, output) {

    output$pl <- renderPlotly({
      x    <- faithful[, 2] 
      dat <- data.frame(xx = c(runif(100,20,50),runif(100,40,80),runif(100,0,30)),yy = rep(letters[1:3],each = 100))

      p <- ggplot(dat,aes(x=xx)) +
        geom_histogram(data=subset(dat,yy == 'a'),fill = "red", alpha = 0.2) 

      p <- ggplotly(p)
    })
  }
)

Just for completeness: `renderUI` is the way to go if you want to move `plotlyOutput()` to the server side, as done [here](https://stackoverflow.com/a/58834215/9841389). — ismirsehregal, Nov 13 '19 at 09:54

score 1 · Accepted Answer · answered Nov 12 '19 at 18:33

1

Instead of moving plotlyOutput in the server, you can set the height to ggplotly:

  ggplotly(p, height = input$GetScreenHeight)

then set height = 100% in plotlyOutput:

plotlyOutput("pl", height = "100%")

Perhaps the height screen.height is not a good choice, it is too big. I recommend:

jscode <-
  '$(document).on("shiny:connected", function(e) {
      var jsHeight = 0.4 * document.body.clientWidth; 
      Shiny.onInputChange("GetScreenHeight", jsHeight);
  });
'

answered Nov 12 '19 at 18:33

Stéphane Laurent

75,186
15
119
225

what should I do in a highcharter case? I added a supplementary example. – firmo23 Nov 12 '19 at 23:38
I will create a new Q – firmo23 Nov 13 '19 at 00:06
its here https://stackoverflow.com/questions/58828538/use-js-to-set-the-height-of-highcharter-plot-and-shinydashboard-box – firmo23 Nov 13 '19 at 00:10

Move plotlyOutput() to the server side in a shiny app

1 Answers1