Search code examples
rjsonhighchartstooltipr-highcharter

Highcharts - Highcharter in R - Getting Tooltip values from df rather than map


I'm attempting to create a map graph with highlighted tiles using highcharter in R. I managed to retrieve a JSON map, create a dataframe with my data, and generate a highcharter map graph. I'm now customizing the toolip, which should display the country name, region and the number integer in my dataframe's count column. Using the hc_tooltip() function returns the name and region, but doesn't find the values. I suspect this is due to the tooltip function looking in the map data rather than my dataframe. I'm unsure how to change that. Here's an example:

map <- "https://code.highcharts.com/mapdata/custom/world-highres.geo.json" %>% 
  GET() %>% 
  content() %>% 
  jsonlite::fromJSON(simplifyVector = FALSE)


sample_table <- data.frame(name = c("Spain","France","China"),
           continent = c("Europe","Europe","Asia"),
           occurences = c(150,70,120))

cols3 <- scales::viridis_pal(option = "turbo",
                             begin = 0.4,
                             direction = 1)(length(unique(sample_table$name)))

highchart(type = "map") %>% 
  hc_title(text = "Map Title") %>%
  hc_subtitle(text = "Map Subtitle") %>%
  hc_add_series_map(map = map, df = sample_table, joinBy = "name", value = "occurences",
                    dataLabels = list(enabled = TRUE
                                      ,format = "{point.properties.hc-a2}")
  ) %>%
  hc_colors(cols3) %>%
  hc_colorAxis(stops = color_stops(colors = cols3)) %>%
  hc_tooltip(
    useHTML = TRUE,                             
    formatter = JS(
      "
      function(){
        outHTML = '<b>' + this.point.name + '</b> <br>' + this.point.continent +
        '</b> <br>' + this.point.occurences
        return(outHTML)
      }

      "
    ))%>%
  hc_mapNavigation(enabled = TRUE)

Where the table contains the following

    name continent occurences
1  Spain    Europe        150
2 France    Europe         70
3  China      Asia        120

enter image description here

As you can see from the image, I get the country and continent name as intended, but I do not get the number of occurrences. Is there a way to get the tooltip values from both the map data and the dataframe?


Solution

  • When you included hc_add_series_map you defined the value of the variable to chart as "occurences". To include this column in your formatter, try using:

    this.point.value
    

    instead of referencing the column name.

    Here is the complete example:

    library(highcharter)
    library(httr)
    
    map <- "https://code.highcharts.com/mapdata/custom/world-highres.geo.json" %>% 
      GET() %>% 
      content() 
    
    sample_table <- data.frame(name = c("Spain","France","China"),
                               continent = c("Europe","Europe","Asia"),
                               occurences = c(150,70,120))
    
    cols3 <- scales::viridis_pal(option = "turbo",
                                 begin = 0.4,
                                 direction = 1)(length(unique(sample_table$name)))
    
    highchart(type = "map") %>% 
      hc_title(text = "Map Title") %>%
      hc_subtitle(text = "Map Subtitle") %>%
      hc_add_series_map(map = map, 
                        df = sample_table, 
                        joinBy = "name", 
                        value = "occurences",
                        dataLabels = list(enabled = TRUE,format = "{point.properties.hc-a2}")
      ) %>%
      hc_colors(cols3) %>%
      hc_colorAxis(stops = color_stops(colors = cols3)) %>%
      hc_tooltip(
        useHTML = TRUE,                             
        formatter = JS(
          "
          function(){
            outHTML = '<b>' + this.point.name + '</b> <br>' + this.point.continent +
            '</b> <br>' + this.point.value;
            return(outHTML)
          }
          "
        )) %>%
      hc_mapNavigation(enabled = TRUE)
    

    Map

    map with value included in formatter