plotly fixed ratio

[Uriah]

I want to force my plotly to be square the same way I do it with ggplot objects:

library(ggplot2)
library(plotly)
library(magrittr)

iris %>%
  ggplot(aes(x = Sepal.Length , y = Sepal.Width)) +
  geom_point() +
  theme(aspect.ratio=1)


iris %>%
  plot_ly(x =~ Sepal.Length, y =~ Sepal.Width) %>%
  add_markers()

I can do it manually with the "width" and "height" arguments but the plot doesn't render well in shiny. Any ideas?

[nirgrahamuk]

@Uriah

I can do it manually with the "width" and "height" arguments but the plot doesn't render well in shiny

what does 'doesnt render well' mean exactly ?

[Uriah]

If I set the height and the weight to some fixed numbers the size of the plot won't be flexible and won't adjust to the container (a tab panel in my case).

[nirgrahamuk]

I'm hopeful this example will get you closer to a solution.
I think the missing piece is some javascript that will listen to changes in perhaps the plot width, that you could then force the height for, (in place of my example slider inputs)

library(plotly)
library(shiny)

ui <- fluidPage(
  sliderInput("plot_width", "Width", min = 100, max = 1000, step = 10, value = 400),
  sliderInput("plot_height", "Height", min = 100, max = 1000, step = 10, value = 400),
  plotlyOutput("myplot", width = "400px", height = "400px")
)

server <- function(input, output, session) {
  observeEvent(input$plot_height, {
    plotlyProxy("myplot", session) %>%
      plotlyProxyInvoke("relayout", list(
        width = input$plot_height,
        height = input$plot_height
      ))
  })

  observeEvent(input$plot_width, {
    updateSliderInput(
      session = session,
      "plot_height",
      value = input$plot_width
    )
  })

  observeEvent(input$plot_height, {
    updateSliderInput(
      session = session,
      "plot_width",
      value = input$plot_height
    )
  })
  output$myplot <- renderPlotly(plot_ly(economics, x = ~date, y = ~uempmed))
}

shinyApp(ui, server)

[Uriah]

That's a really cool demonstration but unfortunately it's not very helpful to me. I agree with you about the missing piece, if I'll find something here I'll let you know.

Thanks for your time and effort!

[nirgrahamuk]

This works for me

library(shiny)
library(plotly)

ui <- fluidPage(
  div(style="width:100%;height:0;padding-top:100%;position:relative;",
      div(style="position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;",
     plotlyOutput("myplot",height="100%")))
)

server <- function(input, output, session) {
  output$myplot <- renderPlotly(
    plot_ly(iris,
            x=~Petal.Length,
            y=~Sepal.Length,
            colour = ~ Species)
  )
}

shinyApp(ui, server)