`facet_wrap()` with `scales = "free_x"` squishes middle facets
Nobody has claimed this yet.
- Dominant language
- R
- Stars
- 2.7k
- Forks
- 641
- PR merge metrics
- No merged PRs in 30d
Description
Summary
When using facet_wrap() with scales = "free_x", the middle facets rows appear squished.
MWE
This bug is most apparent when working in Shiny contexts:
library(ggplot2)
library(shiny)
library(plotly)
ui <- fluidPage(
plotlyOutput("p", height = "800px")
)
server <- function(input, output, session) {
output$p <- renderPlotly({
plt <- palmerpenguins::penguins |>
ggplot(
aes(x = sex)
) +
geom_bar() +
facet_wrap(
ggplot2::vars(species, island, year),
ncol = 2,
axes = "all",
scales = "free_x" # or "free"
)
plotly::ggplotly(plt)
})
}
shinyApp(ui, server)
The result is an output where the first and last row of facets look correct, but all the middle facet rows are squished and there's a bunch of whitespace inbetween:
Interestingly, if you use scales = "free_y" or scales = "fixed", the bug is not triggered:
Potential Cause
I believe this is an issue with the responsivity / css of the resulting plot. You can get this to trigger outside of shiny, by doing the following:
- Size your plot output window to result in a squished output, and run the following:
plt <- palmerpenguins::penguins |>
ggplot(
aes(x = sex)
) +
geom_bar() +
facet_wrap(
ggplot2::vars(species, island, year),
ncol = 2,
axes = "all",
scales = "free_x"
)
plotly::ggplotly(plt)
Result:
- Resize the plot window by increasing the height, and you get the weird result:
- Key observation: if you now re-run the code from step 1, with the window height already tall, it renders correctly:
This is why I think there's responsivity / css thing going on here -- I imagine Shiny is rendering to a smaller height, then resizing to fill the space of the div. Responsivity is broken, triggering the weird result.
Thanks for looking in to this!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the provided R/Shiny MWE with ggplot2, plotly, and facet_wrap(scales = "free_x"), then reproduce the resize sequence outside Shiny. Inspect the generated plot layout and responsive behavior during resizing; done means middle facet rows retain their expected heights and whitespace does not appear after resizing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, r
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100