0

I'm having an issue with linking two plotly charts in R Shiny. Very similiar example is shown here: Shiny with two plotly plots and crosstalk issue , but there highlighting is based on selecting an area.

In my case, I'd like to highlight points on the other chart when hovering over a corresponding point on the first chart, which seems to work, but quickly the page stops responding due to recursion issues in Javascript (or at least I suspect so). The example seems to work if the highlight() function is set to anything other than "plotly_hover" (although it's bit slow nevertheless).

This is the error that I'm getting in the web browser's console

Uncaught RangeError: Maximum call stack size exceeded
at JSON.stringify (\<anonymous\>)
at e.value (shinyapp.ts:382:22)
at e.value (inputBatchSender.ts:63:23)
at e.value (inputBatchSender.ts:41:16)
at e.value (inputNoResendDecorator.ts:45:19)
at e.value (inputEventDecorator.ts:45:21)
at e.value (inputRateDecorator.ts:63:19)
at e.value (invoke.ts:38:17)
at e.value (inputRateDecorator.ts:39:75)
at e.value (inputValidateDecorator.ts:55:19)

And reproducible example

library(shiny)
library(plotly)

ui <- fluidPage(
  sliderInput("rows", label = "# Rows", min = 50, max = 150, value = 100),
  plotlyOutput("scatter1"),
  plotlyOutput("scatter2")
)

server <- function(input, output, session) {
  
  iris_new <- reactive({
    highlight_key(iris[1:as.numeric(input$rows),])
  })
  
  output$scatter1 <- renderPlotly({
    plot_ly(
      iris_new(),
      x = ~Sepal.Length, 
      y = ~Sepal.Width,
      color = ~Species,
      type = "scatter",
      mode = "markers"
    ) %>% 
      highlight("plotly_hover")
  })
  
  output$scatter2 <- renderPlotly({
    plot_ly(
      iris_new(),
      x = ~Petal.Length, 
      y = ~Petal.Width,
      color = ~Species,
      type = "scatter",
      mode = "markers"
    ) %>% 
      highlight("plotly_hover")
  })
}

shinyApp(ui, server)

I'm using plotly version 4.10.2 and shiny version 1.7.4

Is this the right use of highlight_key() and highlight() in plotly? Tried to use crosstalk's SharedData() rather than highlight_key(), but seems to result in the same outcome. Thanks for any help!

Marcin Karliński
  • 1

1 Answers1

0

If anyone ever encountered this issue, simply setting debounce argument to a reasonable value (in my case for 10 it works fine) should resolve it. That's what happens when you don't read documentation carefully, because it's mentioned in there...

library(shiny)
library(plotly)

ui <- fluidPage(
  sliderInput("rows", label = "# Rows", min = 50, max = 150, value = 100),
  plotlyOutput("scatter1"),
  plotlyOutput("scatter2")
)

server <- function(input, output, session) {
  
  iris_new <- reactive({
    highlight_key(iris[1:as.numeric(input$rows),])
  })
  
  output$scatter1 <- renderPlotly({
    plot_ly(
      iris_new(),
      x = ~Sepal.Length, 
      y = ~Sepal.Width,
      color = ~Species,
      type = "scatter",
      mode = "markers"
    ) %>% 
      highlight("plotly_hover", debounce = 10)
  })
  
  output$scatter2 <- renderPlotly({
    plot_ly(
      iris_new(),
      x = ~Petal.Length, 
      y = ~Petal.Width,
      color = ~Species,
      type = "scatter",
      mode = "markers"
    ) %>% 
      highlight("plotly_hover", debounce = 10)
  })
}

shinyApp(ui, server)
Marcin Karliński
  • 1