Ggiraph plot does not resize page
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 this:
As you can see in the code, the first barcode is the ggplot
one that works as it should. It is site responsive and has a rectangular format. ggiraph
stays in square format and does not fit the page.
How do I make ggiraph look like ggplot?
I tried several combinations of width and height argument including width = "auto"
and height = "auto"
. This made ggiraph fit the page, but still in a square format.
source to share
There is now an official expression.
See: https://github.com/davidgohel/ggiraph/issues/71
There is no way to fix this problem!
source to share
You can make the ui responsive with some js code in it. Something like this .
The difference is that the function ggiraph
requires input in inches, so we will need to convert pixels to inches. The formula for this inches = pixels/dpi
. Thus, the js code in the ui passes the height of the window and together with the dpi on the screen, from which we can calculate the length in inches, which can then be passed to the function ggiraph
and therefore make the graph responsible for the ui.
I modified your example to do just that. Hope this 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)
source to share