How to integrate information from multiple traces in a singular plotly hovertext in shiny

Question

Aim of the code is to create a shiny application utilising plotly. We want the information for each trace line to appear in a singular hovertemplate for any given point along the x-axis. For example, three trace lines in a singular scatter plot (mode = 'lines+markers') and when the user places their curser on a singular scatter point, the hover text gives them their scores from each of the three plots for that x-value.

In the example below, we are using reactive function Data() to be the data for one participant which has been subsetted earlier in the server end code. variable1, variable2, and variable3 are the columns from Data() we are plotting in the scatter plot. No double the solution will have a singular hovertext specification as opposed to the 3 seperate ones below.

We want to have a hovertemplate / hovertext to look roughly like:

Here are your scores

variable 1 = XXX

variable 2 = XXX

variable 3 = XXX

For advanced points: a verticle line appearing when they hover over a datapoint that goes from the top to the bottom of the plot at that datapoint would look great.

output$distPlot <-  renderPlotly({
  
  
  plot_ly() %>%
    add_trace(                  # trace for variable 1         
      type = 'scatter',
      mode = 'lines+markers',
      x = Data()$Sys.time          # take the time variable from data() for x
      y = Data()$variable1,        # Plot variable1
      hovertemplate = paste(
        "<b>Here are your scores</b><br><br>",
        "variable1: y <br>",
        "variable2: plot2$y <br>",    # placeholder for solution
        "variable3: plot3$y <br>",    # placeholder for solution
        "<extra></extra>"
      ),
      showlegend = TRUE
    ) %>%

       add_trace(                   # trace for variable 2            
      type = 'scatter',
      mode = 'lines+markers',
      x = Data()$Sys.time          # take the time variable from data() for x
      y = Data()$variable2,        # Plot variable2
      hovertemplate = paste(
        "<b>Here are your scores</b><br><br>",
        "variable1: plot1$y <br>",         # Placeholder for solution
        "variable2: y <br>",   
        "variable3: plot3$y <br>",    # Placeholder for solution
        "<extra></extra>"
      ),
      showlegend = TRUE
    ) %>%

    add_trace(                      # trace for variable 3                     
      type = 'scatter',
      mode = 'lines+markers',
      x = Data()$Sys.time          # take the time variable from data() for x
      y = Data()$variable3,        # Plot variable3
      hovertemplate = paste(
        "<b>Here are your scores</b><br><br>",
        "variable1: plot1$y <br>",    # Placeholder for solution
        "variable2: plot2$y <br>",    # Placeholder for solution
        "variable3: y <br>",          
        "<extra></extra>"
      ),
      showlegend = TRUE
    ) 
})      # Close plot

hi, can you provide a reproducible example with ui and server parts? — bretauv
Are you aware of the fact that you can click compare data on hover in plotly's toolbar (upper right corner) to get a similar behaviour by default? — ismirsehregal
@ismirsehregal this works well, can we make "compare data on hover" default option in a Shiny plot? i.e. renders in compare not in single mode? — Conal Monaghan

ismirsehregal ismirsehregal · Accepted Answer · 2020-01-21T13:22:20

You'll just have to set hovermode = 'compare'.

Here is a simple example:

library(shiny)
library(plotly)

DF <- data.frame(values = c(seq(1, 10, length.out = 10),
                            seq(1, 20, length.out = 10),
                            seq(1, 30, length.out = 10)), variables = rep(LETTERS[1:3], each = 10))

ui <- fluidPage(
plotlyOutput("myPlot")  
)

server <- function(input, output, session) {
  output$myPlot <- renderPlotly({
    plot_ly(DF, y = ~values, color = ~variables, type = "scatter", mode = "lines+markers") %>%
      layout(hovermode = 'compare')
  })
}

shinyApp(ui, server)

How to integrate information from multiple traces in a singular plotly hovertext in shiny

1 Answers