Plotly bar chart with crosstalk

Question

I have an app with two plotly outputs. I want to combine them using crosstalk. When I run the app, however whenever I click a bar in one of the plots, only half the bar is highlighted. Why?

library(shiny)
library(crosstalk)
library(plotly)
require(dplyr)

df <- tibble(names = LETTERS[1:5], x = runif(5,10,20), y = runif(5,50,100))
# df <- data.frame(names = LETTERS[1:5], x = runif(5,10,20), y = runif(5,50,100))

ui <- fluidPage(
  fluidRow(
    column(4, plotlyOutput("outp1")),
    column(4, plotlyOutput("outp2"))
  )
)

server <- function(input, output, session) {
  
  hd <- highlight_key(df, ~names)
  
  output$outp1 <- renderPlotly({
    plot_ly(
      hd,
      x = ~names,
      y = ~x,
      type = "bar",
      source = "p1"
    ) %>% highlight(on = "plotly_click", off = "plotly_doubleclick")
  })
  
  output$outp2 <- renderPlotly({
    plot_ly(
      hd,
      x = ~names,
      y = ~y,
      type = "bar",
      source = "p2"
    ) %>% highlight(on = "plotly_click", off = "plotly_doubleclick")
  })
  
}

shinyApp(ui, server)

Answer 1

According to this, adding layout(barmode = "overlay") to the plotly objects seems to solve the issue.

server <- function(input, output, session) {
  
  hd <- highlight_key(df, ~names)
  
  output$outp1 <- renderPlotly({
    plot_ly(
      hd,
      x = ~names,
      y = ~x,
      type = "bar"
    ) %>% layout(barmode = "overlay") %>% highlight(on = "plotly_click", off = "plotly_doubleclick")
  })
  
  output$outp2 <- renderPlotly({
    plot_ly(
      hd,
      x = ~names,
      y = ~y,
      type = "bar"
    ) %>% layout(barmode = "overlay") %>% highlight(on = "plotly_click", off = "plotly_doubleclick")
  })
  
}