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

Viewed 172

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?

1 Answers

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

Related