plotly / plotly/plotly.R

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

Abierto
#2,453 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
R
Estrellas
2.7k
Forks
641
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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!

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza ejecutando el MWE de R/Shiny proporcionado con ggplot2, plotly y facet_wrap(scales = "free_x"), y luego reproduce la secuencia de redimensionamiento fuera de Shiny. Inspecciona el diseño del gráfico generado y el comportamiento responsive durante el redimensionamiento; se considera terminado cuando las filas de facets intermedias conservan sus alturas esperadas y no aparece espacio en blanco después del redimensionamiento.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, r
Área
data-visualization, frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.