Get axis ranges after plotly resize in Shiny

Question

I have a Shiny app with a Plotly plot of time-series data. I want the user to be able to pan the x (time) axis, but keeping a consistent window of one day. To do this, I need to get the current x-axis range after each resize.

Why am I not just using a rangeSlider? Because I have about 25,000 data points, and using a rangeSlider requires loading all of the data into the plot when the app is initialized, which slows things down considerably.

Hallie Swan Hallie Swan · Accepted Answer · 2018-03-28T05:03:46

You can use event_data with plotly_relayout. The official plotly documentation has a demonstration.

Here's a small example showing the xlimits from a plotly timeseries. Note that plotly_relayout will return NULL when the plot is initially rendered, dimensions of plot upon user resizing page, and TRUE when user autoscales plot by double-clicking.

library(shiny)
library(plotly)

ui <- fluidPage(
    fluidRow(column(width = 6,
                    br(),
                    plotlyOutput("plot")),
             column(width = 6,
                    br(), br(),
                    htmlOutput("xlims"),
                    br(),
                    h4("Verbatim plotly `relayout` data"),
                    verbatimTextOutput("relayout")))
)

server <- function(input, output, session) {
    # create the plotly time series
  output$plot <- renderPlotly({
      today <- Sys.Date()
      tm <- seq(0, 600, by = 10)
      x <- today - tm
      y <- rnorm(length(x))
      p <- plot_ly(x = ~x, y = ~y, mode = 'lines', 
                   text = paste(tm, "days from today"), source = "source")
  })

  # print the xlims
  output$xlims <- renderText({
      zoom <- event_data("plotly_relayout", "source")
      # if plot just rendered, event_data is NULL
      # if user double clicks for autozoom, then zoom$xaxis.autorange is TRUE
      # if user resizes page, then zoom$width is pixels of plot width
      if(is.null(zoom) || names(zoom[1]) %in% c("xaxis.autorange", "width")) {
          xlim <- "default of plot"
      } else {
          xmin <- zoom$`xaxis.range[0]`
          xmax <- zoom$`xaxis.range[1]`
          xlim <- paste0("Min: ", xmin, "<br>Max: ", xmax)
      }
      paste0("<h4>X-Axis Limits:</h4> ", xlim)
  })

  # print the verbatim event_data for plotly_relayout
  output$relayout <- renderPrint({event_data("plotly_relayout", "source")})
}

shinyApp(ui, server)

Get axis ranges after plotly resize in Shiny

1 Answers