plotly / plotly/plotly.R

`facet_wrap()` with `scales = "free_x"` squishes middle facets

Open
#2,453 2 comments 0 reactions 0 assignees View on GitHub

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:

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!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.