rgraphicstooltipr-highcharter

Formatting Issue with Tooltip in Highcharter Dependency Wheel Chart


I'm using the highcharter package in R to create a dependency wheel chart visualizing export relationships between Brazilian regions and economic blocs. While most of the chart's formatting is correct, I'm encountering an issue with the tooltip when the external label is selected. Specifically, the formatting between connections is accurate, but the tooltip format is inconsistent or not as expected.

Here's an example of my data:

g_211a <- tibble(
  Ano = rep("2020", 40),
  Nome_Regiao = c(
    "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste",
    "Nordeste", "Nordeste", "Nordeste", "Nordeste", "Nordeste", "Nordeste", "Nordeste", "Nordeste",
    "Norte", "Norte", "Norte", "Norte", "Norte", "Norte", "Norte", "Norte",
    "Sudeste", "Sudeste", "Sudeste", "Sudeste", "Sudeste", "Sudeste", "Sudeste", "Sudeste",
    "Sul", "Sul", "Sul", "Sul", "Sul", "Sul", "Sul", "Sul"
  ),
  Nome_Bloco = c(
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia",
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia",
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia",
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia",
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia"
  ),
  US_FOB = c(
    280, 1148, 971, 6188, 20.1, 1548, 1308, 17051,
    165, 3743, 1509, 3383, 49.0, 179, 362, 6712,
    43.4, 1109, 933, 4471, 26.7, 636, 337, 16642,
    1623, 18777, 12504, 17432, 528, 3512, 4130, 40856,
    822, 4732, 6727, 5822, 188, 2912, 1726, 17984
  ),
  peso = c(
    1215963, 2518346, 3425936, 15357213, 23305, 5376993, 4812262, 43083225,
    208721, 7951870, 1206296, 6961486, 38124, 775838, 1535158, 20753837,
    107386, 4114713, 953891, 19801871, 16271, 3510910, 727275, 176968392,
    3580532, 22133764, 9771731, 35172655, 480777, 16728713, 12210101, 207129913,
    1056835, 4403596, 5519469, 8332363, 282375, 4560093, 3215392, 41396083
  )
)

Here is the code I'm using to generate the dependency wheel chart:

library(highcharter)
library(tidyverse)

generate_wheel_region <- function(data, measure, year_filter, region_filter) {
  measure_column <- ifelse(measure == "value", "US_FOB", "Peso_Liquido")
  
  wheel_data <- data %>%
    group_by(Nome_Regiao, Nome_Bloco) %>%
    summarise(Measure = sum(.data[[measure_column]], na.rm = TRUE),
              .groups = "drop")
  
  connections <- data %>%
    transmute(from = Nome_Regiao, to = Nome_Bloco, weight = US_FOB)
  
  nodes <- unique(c(connections$from, connections$to)) |>
    lapply(function(x) {
      list(
        id = x,
        name = gsub("\\d+\\.\\s?", "", x)
      )
    })
  
  title_measure <- ifelse(measure == "value", "Valor Exportado (US$)", "Peso Exportado (Toneladas)")
  title_title <- "Relações de Exportação entre Regiões e Setores Econômicos"
  title_subtitle <- paste("Região:", region_filter, " | Ano:", ifelse(year_filter == "Todos", "2011-2020", year_filter))
  
  tooltip_text <- paste(
    "<b>{point.from}</b> → <b>{point.to}</b> <br>",
    ifelse(measure == "value",
           "<b> Valor Exportado </b> US$ {point.weight:,.1f} mi",
           "<b> Peso Exportado </b>: {point.weight:,.1f} toneladas"
    )
  )
  
  highchart() %>%
    hc_chart(type = "dependencywheel", backgroundColor = "white") %>%
    hc_title(text = title_title) %>%
    hc_subtitle(text = title_subtitle) %>%
    hc_add_series(
      data = connections,
      name = "Exportações",
      hcaes(from = from, to = to, weight = weight),
      type = "dependencywheel",
      nodes = nodes
    ) %>%
    hc_tooltip(useHTML = TRUE, pointFormat = tooltip_text) %>%
    hc_add_theme(hc_theme_smpl()) %>%
    hc_exporting(enabled = TRUE)
}

generate_wheel_region(
  g_211a,
  "value",
  2020,
  c("Sul", "Nordeste")
)

Problem: The tooltips are formatted correctly for the connections between labels, but when selecting an external label, the formatting appears different.

I need to ensure that the tooltip displays consistently.

enter image description here enter image description here


Solution

  • I think what you're looking for is the nodeFormat argument of hc_tooltip(). This accepts a format string of what to show for nodes in tooltip of the dependency wheel, as opposed to the links. By default, it's set to "{point.name}: <b>{point.sum}</b><br/>", which is why the tooltip is different for the labels closest to the outer perimeter of the wheel. So something like

    hc_tooltip(
          useHTML = TRUE, 
          pointFormat = tooltip_text,
          nodeFormat = "<b>{point.name}</b><br/> <b> Valor Exportado </b> US$ {point.sum:,.1f} mi"
        )
    

    could work. If we run this with the rest of the code you provided above, it generates the following tooltip when hovering over the region names: Highcharts dependency wheel with custom node tooltip