Search code examples
rflexdashboard

Show tooltip when hovering on flexdashboard plot in JS or hover action


I have the following sample flexdashboard:

---
title: "Hover"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(tidyverse)
data(iris)
Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}
iris %>% group_by(Species) %>% 
  summarise(mean = mean(Sepal.Length)) %>% 
  ggplot(aes(Species, mean)) + geom_col()

What I want is a tooltip when hovering over the bars in the plot and show its values. I read this article in SO How do I show the y value on tooltip while hover in ggplot2 but it works for Shiny. I tried this:

p <- iris %>% group_by(Species) %>% 
  summarise(mean = mean(Sepal.Length))

labels <- sprintf("<strong>%s</strong><br/>Mean: %f", 
                     p$Species, p$mean) %>% 
     lapply(htmltools::HTML)

p %>% ggplot(aes(Species, mean)) + geom_col() + geom_text(aes(label = labels))

This creates an html tool with the specie and value, what I don't have is the hover (plot_hover maybe?) to show the tooltip.

Any help will be greatly appreciated

Regards,


Solution

  • Here is a way. You have to target the top center of a bar to get the tooltip.

    ---
    title: "Untitled"
    runtime: shiny
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
    ---
    
    ```{r setup, include=FALSE}
    library(flexdashboard)
    library(dplyr)
    library(ggplot2)
    library(shiny)
    ```
    
    Column {data-width=650}
    -----------------------------------------------------------------------
    
    ### Chart A
    
    ```{r}
    dat <- iris %>% group_by(Species) %>% 
      summarise(mean = mean(Sepal.Length))
    output[["ggplot"]] <- renderPlot({
      dat %>% 
      ggplot(aes(Species, mean)) + geom_col()
    })
    output[["hoverinfo"]] <- renderUI({ 
      hover <- input[["plot_hover"]]
      if(is.null(hover)) return(NULL)
      point <- nearPoints(dat, hover, threshold = 50, maxpoints = 1)
      if(nrow(point) == 0) return(NULL)
      left_px <- hover$coords_css$x
      top_px <- hover$coords_css$y
      style <- 
        paste0("position:absolute; z-index:100; background-color: rgba(245, 245, 245, 0.85); ",
               "left:", left_px, 
               "px; top:", top_px, "px;")
      # tooltip created as wellPanel
      tooltip <- paste0(
        "<b> Species: </b>", point[["Species"]], "<br/>",
        "<b> mean: </b>", point[["mean"]]
      )
      wellPanel(
        style = style, p(HTML(tooltip))
      )
    }) 
    plotOutput("ggplot", hover = hoverOpts("plot_hover"))
    div(uiOutput("hoverinfo"), style = "pointer-events: none;")
    ```