ggiraph plot不会调整大小以适应页面

Question

Here is my code:

library(shiny)
library(ggplot2)
library(ggiraph)

df <- data.frame(achseX = LETTERS[1:24], achseY = 1:24, facetX = as.factor(rep(1:4, each = 6)))

server <- function(input, output) {
  output$ggplot <- renderPlot({
    ggplot(data = df) + geom_bar_interactive(aes(tooltip = achseY, x = achseX, y = achseY), stat = "identity") +
      theme_minimal() + facet_grid(.~ facetX, scales = "free_x")
  })


  output$plot <- renderggiraph({
    gg <- ggplot(data = df) + geom_bar_interactive(aes(tooltip = achseY, x = achseX, y = achseY), stat = "identity") +
      theme_minimal() + facet_grid(.~ facetX, scales = "free_x")
    return(ggiraph(code = print(gg), selection_type = "multiple", zoom_max = 4,
                   hover_css = "fill:#FF3333;stroke:black;cursor:pointer;",
                   selected_css = "fill:#FF3333;stroke:black;"))
  })
}

ui <- fluidPage(
  "GGPLOT2:",
  plotOutput("ggplot"),
  "GGIRAPH:",
  ggiraphOutput("plot", width = "500px", height = "1000px")
)

shinyApp(ui = ui, server = server)

The result looks like:

As you can see in the code, the first barplot is a ggplot that works the way it should. It is responsive to the site and has a rectangular format. The ggiraph stays in a square format instead and doesn't fit the page.

How can I get the ggiraph to look like the ggplot?

I tried several combinations of the width and height argument, also including width = "auto" and height = "auto" . This made the ggiraph fit the page, but still in a square format.

Answer 1

You can make the ui responsive with some amount of js code in it. Something along the lines of this answer.

The difference is that the ggiraph function wants the input in inches so we will need to convert pixels into inches. The formula for that is inches = pixels/dpi . So, the js code in the ui passes the window height and with along with the dpi of the screen from which we can calculate the length in inches which can be then passed to the ggiraph function and hence make the plot responsive to the ui.

I have modified your example to do exactly that. Hope it helps!

 library(shiny)
 library(ggplot2)
 library(ggiraph)

 df <- data.frame(achseX = LETTERS[1:24], achseY = 1:24, facetX = as.factor(rep(1:4, each = 6)))

 server <- function(input, output, session) {
   output$ggplot <- renderPlot({
     ggplot(data = df) + geom_bar_interactive(aes(tooltip = achseY, x = achseX, y = achseY), stat = "identity") +
       theme_minimal() + facet_grid(.~ facetX, scales = "free_x")
   })


   output$plot <- renderggiraph({
     gg <- ggplot(data = df) + geom_bar_interactive(aes(tooltip = achseY, x = achseX, y = achseY), stat = "identity") +
       theme_minimal() + facet_grid(.~ facetX, scales = "free_x")
     return(ggiraph(code = print(gg), selection_type = "multiple", zoom_max = 4,
                    hover_css = "fill:#FF3333;stroke:black;cursor:pointer;",
                    selected_css = "fill:#FF3333;stroke:black;", 
                    width_svg = (0.8*input$pltChange$width/input$pltChange$dpi),
                    height_svg = (0.5*input$pltChange$height/input$pltChange$dpi)
                    ))
   })
 }

 ui <- fluidPage(

   tags$body(tags$div(id="ppitest", style="width:1in;visible:hidden;padding:0px")),

   tags$script('$(document).on("shiny:connected", function(e) {
                                    var w = window.innerWidth;
                                    var h = window.innerHeight;
                                    var d =  document.getElementById("ppitest").offsetWidth;
                                    var obj = {width: w, height: h, dpi: d};
                                    Shiny.onInputChange("pltChange", obj);
                                });
                                $(window).resize(function(e) {
                                    var w = $(this).width();
                                    var h = $(this).height();
                                    var d =  document.getElementById("ppitest").offsetWidth;
                                    var obj = {width: w, height: h, dpi: d};
                                    Shiny.onInputChange("pltChange", obj);
                                });
                            '),


   "GGPLOT2:",
   plotOutput("ggplot"),
   "GGIRAPH:",
   ggiraphOutput("plot")
 )

 shinyApp(ui = ui, server = server) 

Answer 2

There is an official statement to this now.

See: https://github.com/davidgohel/ggiraph/issues/71

It is not possible to fix this issue!