Skip to content

facet_wrap() with scales = "free_x" squishes middle facets #2453

Description

@khusmann

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:

Image

Interestingly, if you use scales = "free_y" or scales = "fixed", the bug is not triggered:

Image

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:

  1. 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:

Image
  1. Resize the plot window by increasing the height, and you get the weird result:
Image
  1. Key observation: if you now re-run the code from step 1, with the window height already tall, it renders correctly:
Image

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!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions