Adding an image in tooltip of ggRadar

Question

Goal

I want to display images based on a column containing local/external url of images in a radar chart.

Reproducible Example

This is possible for a bar chart with ggiraph as shown below:

require(ggplot2)
require(ggiraph)
require(ggiraphExtra)

# Sample image
mtcars$gif_link <-"https://media.giphy.com/media/rrmf3fICPZWg1MMXOW/giphy.gif" 
mtcars$model <- row.names(mtcars)

# Create a ggplot object with interactivity using ggiraph
gg <- ggplot(mtcars, aes(y = as.factor(am), x = mpg)) +
  geom_bar_interactive(aes(tooltip = paste(model, "<img src=", shQuote(gif_link), " height='100'>")), stat = "identity") +
  theme_minimal()

# Display the ggiraph object
girafe(ggobj = gg)

But it doesn't work with ggRadar:

ggRadar(data  =mtcars, aes(colour=am,
                           tooltip = paste(model, "<img src=", shQuote(gif_link), " height='100'>")),
        interactive=TRUE)
Error in `[.data.frame`(data, groupvar) : undefined columns selected

I am open to using any other package/method that would achieve my goal.

Site note: you should almost always use `library`, not `require`. The latter never stops following code when the package is not available, which is almost never what is intended. Refs: https://stackoverflow.com/a/51263513/3358272, https://yihui.org/en/2014/07/library-vs-require/, https://r-pkgs.org/namespace.html#search-path — r2evans, Aug 28 '23 at 18:02

stefan · Accepted Answer · 2023-08-28T21:14:41.493

One option would be to build your radar chart from scratch which requires some effort including some data wrangling but gives you all the flexibility of ggiraph:

library(ggplot2)
library(ggiraph)
library(ggiraphExtra)
library(dplyr)

mtcars2 <- mtcars

gg <- mtcars2 |>
  mutate(
    across(-am, ~ (.x - min(.x)) / diff(range(.x)))
  ) |>
  group_by(am) |>
  summarise(across(everything(), mean), .groups = "drop") |>
  tidyr::pivot_longer(-am, names_to = "variable") |>
  arrange(am, variable) |>
  mutate(gif_link = "https://media.giphy.com/media/rrmf3fICPZWg1MMXOW/giphy.gif") |>
  ggplot(aes(
    x = variable, y = value,
    colour = factor(am), fill = factor(am), group = factor(am)
  )) +
  geom_polygon_interactive(alpha = 0.3) +
  geom_point_interactive(
    aes(tooltip = paste0(
      "<i>am:</i> ", am,
      "<br>",
      "<i>", variable, ":</i> ", round(value, 1),
      "<br>",
      "<img src=", shQuote(gif_link), " height='100'>"
    )),
    size = 3
  ) +
  coord_radar()

girafe(ggobj = gg)

EDIT Following this answer we could add local images by wrapping in base64enc::dataURI(). In the code below I download the R logo and add it as local image:

path <- tempdir()
download.file(
  "https://www.r-project.org/logo/Rlogo.png",
  file.path(path, "RLogo.png")
)
gg <- mtcars2 |>
  mutate(
    across(-am, ~ (.x - min(.x)) / diff(range(.x)))
  ) |>
  group_by(am) |>
  summarise(across(everything(), mean), .groups = "drop") |>
  tidyr::pivot_longer(-am, names_to = "variable") |>
  arrange(am, variable) |>
  ggplot(aes(
    x = variable, y = value,
    colour = factor(am), fill = factor(am), group = factor(am)
  )) +
  geom_polygon_interactive(alpha = 0.3) +
  geom_point_interactive(
    aes(tooltip = paste0(
      "<i>am:</i> ", am,
      "<br>",
      "<i>", variable, ":</i> ", round(value, 1),
      "<br>",
      "<img src=", base64enc::dataURI(file = file.path(path, "RLogo.png")),
      " height='100'>"
    )),
    size = 3
  ) +
  coord_radar()

girafe(ggobj = gg)

Thank you for taking the time to write this solution. I will try it and later accept this as solution. Quick question: Is it possible to use a local image rather instead of giphy image here? I tried local images but that didn't work. Thanks again. — umair durrani, Aug 28 '23 at 20:32
I think this is a general issue when dealing with interactive technologies. But following this [answer](https://stackoverflow.com/a/61497919/12993861) related to shiny and plotly you could wrap the path to local images in `base64enc::dataURI()`, e.g. `base64enc::dataURI(file = "www/RLogo.png")` worked fine for me. — stefan, Aug 28 '23 at 20:48
I tried `base64enc::dataURI` but didn't work (maybe not compatible with `ggiraph`?). Thanks again for this solution. — umair durrani, Aug 28 '23 at 21:00
Hm. Weird. Have a look at my edit. Perhaps that helps to figure out what's the issue. — stefan, Aug 28 '23 at 21:15
I tried and found that the image does not display if the path is provided as a value from a column in the dataframe. I thought putting the `tooltip` in `aes` would mean I could provide a column name that contains file path, but that did not work. — umair durrani, Aug 29 '23 at 12:59

Adding an image in tooltip of ggRadar

Goal

Reproducible Example

1 Answers1