Button to view in full screen

Question

I'm writing a shiny app with highcharter.

In my app I would like to add an independant button to view my chart in full screen.

I think I have to add JS code with the button "action_fs" in my example... Here's my app:

library(shiny)
library(dplyr)
library(highcharter)

ui <- fluidPage(
  fluidRow(
    actionButton("mybutton","launch"),
    br(),
    column(width = 6,
           uiOutput("button_fullscreen"),
           highchartOutput("mygraph")
    )
  )
)

server = function(input, output) {

  mytab <- iris %>% group_by(Species) %>% summarise(mystat=sum(Petal.Length,na.rm = T))

  observeEvent(input$mybutton, {

    output$button_fullscreen <- renderUI({
      actionButton("action_fs","view in full screen")
    })

    output$mygraph <- renderHighchart({
      highchart() %>%
        hc_chart(type = "bar") %>%
        hc_add_series(data = mytab$mystat, name = "Petal.Length") %>%
        hc_xAxis(categories = mytab$Species)
    })
  })
}

shinyApp(ui = ui, server = server)

Answer 1

I can't install highcharter (dependency quantmod not available), so here is an example with a ggplot:

library(shiny)
library(ggplot2)

js <- "
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}"

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js))
  ),
  fluidRow(
    column(
      width = 3,
      actionButton(
        "fs", "Full screen", 
        onclick = "openFullscreen(document.getElementById('graphContainer'));"
      )
    ),
    column(
      width = 9,
      div(
        id = "graphContainer",
        plotOutput("ggplot")
      )
    )
  )
)

server <- function(input, output, session){

  output[["ggplot"]] <- renderPlot({
    ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
  })

}


shinyApp(ui, server)

---

EDIT

The problem with the above solution is that the plot height does not change when the app is in full screen mode. With the solution below, the plot height becomes the screen height when one switches to the full screen mode.

library(shiny)
library(ggplot2)

js <- "
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}"

css <- "
#ggplot:-webkit-full-screen {
  height: 100%;
  margin: 0;
}
#ggplot:-ms-fullscreen {
  height: 100%;
}
#ggplot:fullscreen {
  height: 100%;
}"

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js)),
    tags$style(HTML(css))
  ),
  br(),
  fluidRow(
    column(
      width = 3,
      actionButton(
        "fs", "Full screen", 
        onclick = "openFullscreen(document.getElementById('ggplot'));"
      )
    ),
    column(
      width = 9,
      plotOutput("ggplot")
    )
  )
)

server <- function(input, output, session){

  output[["ggplot"]] <- renderPlot({
    ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
  })

}


shinyApp(ui, server)