ggiraph plot doesn't resize to fit the page

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.

score 6 · Answer 1 · answered Aug 02 '17 at 13:57

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)

Several years later this answer is still extremely useful, thank you @SBista — Matt Cowgill, May 06 '21 at 10:13
It would be even more helpful, if you could mark the code which you added that one can see it at one glance. — Markus Bauer, Mar 23 '22 at 09:32

score 4 · Accepted Answer · answered Sep 15 '17 at 10:22

4

There is an official statement to this now.

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

It is not possible to fix this issue!

answered Sep 15 '17 at 10:22

Felix Grossmann

1,224
1
11
30

ggiraph plot doesn't resize to fit the page

2 Answers2