Adding Icons or Color to the Tooltip

[dreamrs]

Adding Icons or Color to the Tooltip

[pvictor]

Hello Simon,

You have to use some JavaScript in tooltip's formatter, here's an example:

library(dplyr)
library(tidyr)
library(apexcharter)

my_data <- mtcars %>% 
  select(mpg, qsec) %>% 
  add_rownames("car") %>% 
  mutate(diff_mpg = round(mpg - lag(mpg), 1), diff_qsec = round(qsec - lag(qsec), 1)) %>%
  select(car, diff_mpg, diff_qsec) %>% 
  gather(var, value, -car)

my_chart <- apex(my_data, type = "bar", aes(car, value, fill = var)) %>% 
  ax_plotOptions(bar = bar_opts(
    horizontal = FALSE,
    endingShape = "flat",
    columnWidth = "70%",
    dataLabels = list(
      position = "top"
    ))
  ) 

# Color value
my_chart %>% 
  ax_tooltip(
    y = list(
      formatter = JS(
        "function(value) {",
        "var color = value >= 0 ? 'forestgreen' : 'firebrick';",
        "return '<span style=\"font-weight: 700; color:' + color + ';\">' +  value + '</span>';",
        "}"
      )
    )
  )

# Use an icon: first we need to add FontAwesome dependency
my_chart$dependencies <- htmltools::htmlDependencies(shiny::icon("home")) # add FontAwesome HTML dependency
my_chart %>% 
  ax_tooltip(
    y = list(
      formatter = JS(
        "function(value) {",
        
        # https://fontawesome.com/v4.7.0/icon/arrow-down
        "var icon_up = '<i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>';",
        "var icon_down = '<i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>';",
        
        "var icon = value >= 0 ? icon_up : icon_down;",
        "return value + '  ' + icon;",
        "}"
      )
    )
  )

With colors it gives:

And with icon:

Of course you can combine the two or color the icon.

Victor

[systats]

thanks a lot. Works perfect.