Tooltip

Helper

Since version 0.2.1 you can also easily format the axis to decimal, percentages or currencies thanks to contribution from Artem Klevtsov.

cars |> 
  dplyr::mutate(
    dist = dist / 120
  ) |> 
  e_charts(speed) |> 
  e_scatter(dist, symbol_size = 10) |> 
  e_tooltip(
    formatter = e_tooltip_item_formatter("percent")
  )

JavaScript

Thanks to Sharon Machlis for helping put this document together.

You can display a default tooltip by adding e_tooltip() to the code that creates your visualization, such as

mtcars |>
  e_charts(wt) |>
  e_scatter(mpg, qsec) |>
  e_tooltip(trigger = "item")

Note that you can change the trigger to axis.

mtcars |>
  e_charts(wt) |>
  e_line(mpg) |>
  e_line(qsec) |> 
  e_tooltip(trigger = "axis")

In order to customize the tooltip, you’ll need to be comfortable adding a little JavaScript to your R code. Tooltip customization uses the formatter.

e_tooltip(
  formatter = htmlwidgets::JS("
    function(params){
      return();
    }
  ")
)

Where the specific information you’d like to appear goes within return().

Here’s what you need to know about adding variables into that return() code:

The x-axis variable is params.value[0]. The y-axis variable is params.value[1]. If you added another, size variable to the scatter plot, that would be params.value[2]. (Note that because this is JavaScript, indexing starts with 0 as in most computer languages, and not 1 as in R.)

Here’s how you might customize a tooltip for a scatter plot of mtcars wt and mpg, in order to show both wt and mpg in the tooltip:

mtcars |>
  e_charts(wt) |>
  e_scatter(mpg, qsec) |>
  e_tooltip(formatter = htmlwidgets::JS("
      function(params){
        return('wt: ' + params.value[0] + '<br />mpg: ' + params.value[1])
      }
    ")
  )

If you’d like to add information about a data frame column that’s not included in the chart, you can pass in that data using the bind argument. As an example, you might want to include the name of the car model in the tooltip. With this particular data set, you’d first need to create that column, which you can do with code such as mtcars <- tibble::rownames_to_column(mtcars, "model"). Then, you can pass that column into your scatter plot visualization with e_scatter(mpg, bind = model).

mtcars |>  
  tibble::rownames_to_column("model") |> 
  e_charts(wt) |> 
  e_scatter(mpg, qsec, bind = model) |>
  e_tooltip(
    formatter = htmlwidgets::JS("
      function(params){
        return('<strong>' + params.name + 
                '</strong><br />wt: ' + params.value[0] + 
                '<br />mpg: ' + params.value[1]) 
                }
    ")
  )

John Coene & Sharon Machlis

2024-02-16

Helper

JavaScript