R - leaflet - highcharter tooltip

Question

I want to include a highcharter plot in my leaflet popup. With help from this post Iam able to include a sparkline plot. However, due to my lack of html skills I dont know how to modify the code to work with highcharter. This answer on SO (example from answer) is exactly what I want. I just dont know how to implement in in R.

library(leaflet)
library(tidyverse)
library(htmlwidgets)
library(htmltools)
library(sparkline)
library(highcharter)

# Step 1 convert htmlwidget to character representation of HTML components
as.character.htmlwidget <- function(x, ...) {
  htmltools::HTML(
    htmltools:::as.character.shiny.tag.list(
      htmlwidgets:::as.tags.htmlwidget(
        x
      ),
      ...
    )
  )
}


add_deps <- function(dtbl, name, pkg = name) {
  tagList(
    dtbl,
    htmlwidgets::getDependency(name, pkg)
  )
}

This works fine:

leaflet() %>% 
  addTiles() %>% 
  addCircleMarkers(lat = 45.4, lng = 14.9,
                   popup = list(paste(as.character(sparkline(1:19))))) %>%
  onRender(
    "
function(el,x) {
  this.on('popupopen', function() {HTMLWidgets.staticRender();})
}
") %>%
  add_deps("sparkline") %>%
  browsable()

Unfortunately its not just change add_deps to highcharter

leaflet() %>% 
  addTiles() %>% 
  addCircleMarkers(lat = 45.4, lng = 14.9,
                   popup = list(paste(as.character(
                     hchart(data.frame(x = 1:10, y = 1:10), type = "line", hcaes(x = x, y = y)) %>% hc_size(width = 300, height = 200)
                     ))),
                   popupOptions = popupOptions(minWidth = 300, maxHeight = 200)) %>%
  onRender(
    "
function(el,x) {
  this.on('popupopen', function() {HTMLWidgets.staticRender();})
}
") %>%
  add_deps("highcharter") %>%
  browsable()

I have tried modified the 'popupopen' function without success.

Hi. Highcharts team is not able to help you with 3rd party libraries. I hope SO community will help you and if not, I suggest contacting Leaflet or Highcharter authors. Regards! — raf18seb, Dec 04 '19 at 13:13

score 4 · Accepted Answer · answered Dec 05 '19 at 20:19

First, the solution:

leaflet() %>% 
  addTiles() %>% 
  addCircleMarkers(lat = 45.4, lng = 14.9,
                   popup = list(paste(as.character(
                     hchart(data.frame(x = 1:10, y = 1:10), type = "line", hcaes(x = x, y = y)) %>% hc_size(width = 300, height = 200)
                   ))),
                   popupOptions = popupOptions(minWidth = 300, maxHeight = 200)) %>%
  onRender(
    "
function(el,x) {
  this.on('popupopen', function() {HTMLWidgets.staticRender();})
}
") %>%
  add_deps("highchart", 'highcharter') %>%
  browsable()

And now, why?

This is due to the add_deps function:

add_deps <- function(dtbl, name, pkg = name) {
  tagList(
    dtbl,
    htmlwidgets::getDependency(name, pkg)
  )
}

As you can see, it uses internally htmlwidgets::getDependency. If we try with leaflet package:

library(htmlwidgets)
getDependency('leaflet')[1:3]
#> [[1]]
#> List of 10
#>  $ name      : chr "htmlwidgets"
#>  $ version   : chr "1.5.1"
#>  $ src       :List of 1
#>   ..$ file: chr "/home/malditobarbudo/R/x86_64-pc-linux-gnu-library/3.6/htmlwidgets/www"
#>  $ meta      : NULL
#>  $ script    : chr "htmlwidgets.js"
#>  $ stylesheet: NULL
#>  $ head      : NULL
#>  $ attachment: NULL
#>  $ package   : NULL
#>  $ all_files : logi TRUE
#>  - attr(*, "class")= chr "html_dependency"
#> 
#> [[2]]
#> List of 10
#>  $ name      : chr "jquery"
#>  $ version   : chr "1.12.4"
#>  $ src       :List of 1
#>   ..$ file: chr "/home/malditobarbudo/R/x86_64-pc-linux-gnu-library/3.6/leaflet/htmlwidgets/lib/jquery"
#>  $ meta      : NULL
#>  $ script    : chr "jquery.min.js"
#>  $ stylesheet: NULL
#>  $ head      : NULL
#>  $ attachment: NULL
#>  $ package   : NULL
#>  $ all_files : logi TRUE
#>  - attr(*, "class")= chr "html_dependency"
#> 
#> [[3]]
#> List of 10
#>  $ name      : chr "leaflet"
#>  $ version   : chr "1.3.1"
#>  $ src       :List of 1
#>   ..$ file: chr "/home/malditobarbudo/R/x86_64-pc-linux-gnu-library/3.6/leaflet/htmlwidgets/lib/leaflet"
#>  $ meta      : NULL
#>  $ script    : chr "leaflet.js"
#>  $ stylesheet: chr "leaflet.css"
#>  $ head      : NULL
#>  $ attachment: NULL
#>  $ package   : NULL
#>  $ all_files : logi TRUE
#>  - attr(*, "class")= chr "html_dependency"

^{Created on 2019-12-05 by the reprex package (v0.3.0)}

we can see that it returns a list of leaflet js dependencies (truncated to the first three). If we try the same for highcharter it does not return any dependency (besides the mandatory htmlwidgets dependency)

library(htmlwidgets)
getDependency('highcharter')
#> [[1]]
#> List of 10
#>  $ name      : chr "htmlwidgets"
#>  $ version   : chr "1.5.1"
#>  $ src       :List of 1
#>   ..$ file: chr "/home/malditobarbudo/R/x86_64-pc-linux-gnu-library/3.6/htmlwidgets/www"
#>  $ meta      : NULL
#>  $ script    : chr "htmlwidgets.js"
#>  $ stylesheet: NULL
#>  $ head      : NULL
#>  $ attachment: NULL
#>  $ package   : NULL
#>  $ all_files : logi TRUE
#>  - attr(*, "class")= chr "html_dependency"
#> 
#> [[2]]
#> NULL

^{Created on 2019-12-05 by the reprex package (v0.3.0)}

This is because highcharter is the R package name, not the js library name. You can look at list.files(system.file('htmlwidgets', package = 'highcharter')) to see that the library is called highchart, so using the correct name in this bit:

{...} %>%
  add_deps("highchart", 'highcharter') %>%
  {...}

will do the trick ;)

Did someone tried to insert it in a shiny App? I have tried the following and it's not working — Woza, Apr 14 '20 at 14:12

Woza · Answer 2 · 2020-04-14T14:19:50.977

Hello @Pierre and @MalditoBarbudo, I have tried to adapt your exemple in a shinyApp and I was not able to run it corretly

Can I have some help please?

library(shiny)
library(tidyverse)
library(htmlwidgets)
library(htmltools)
library(leaflet)
library(highcharter)

as.character.htmlwidget <- function(x, ...) {
  htmltools::HTML(
    htmltools:::as.character.shiny.tag.list(
      htmlwidgets:::as.tags.htmlwidget(
        x
      ),
      ...
    )
  )
}


add_deps <- function(dtbl, name, pkg = name) {
  tagList(
    dtbl,
    htmlwidgets::getDependency(name, pkg)
  )
}


ui = fluidPage(
  leafletOutput("map")
)

#server.r
server = function(input, output, session) {


  output$map <- renderLeaflet({
    leaflet() %>% 
      addTiles() %>% 
      addCircleMarkers(lat = 45.4, lng = 14.9,
                       popup = list(paste(as.character(
                         hchart(data.frame(x = 1:10, y = 1:10), type = "line", hcaes(x = x, y = y)) %>% hc_size(width = 300, height = 200)
                       ))),
                       popupOptions = popupOptions(minWidth = 300, maxHeight = 200)) %>%
      onRender(
        "
function(el,x) {
  this.on('popupopen', function() {HTMLWidgets.staticRender();})
}
") %>%
      add_deps("highchart", 'highcharter') %>%
      browsable()

    })
}

shinyApp(ui = ui, server = server)

R - leaflet - highcharter tooltip

2 Answers2

First, the solution:

And now, why?

Linked