Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Change tooltips of nodes in a highcharter sankey

This is a follow up of a older question (Change labels in highcharter sankey), where the solution shows how to change the tooltips in a R highcharter sankey for the links.

I now want to also change the tooltips for the nodes (Now it only says undefined). Ideally it should contain the sum of all the links per node.

This is a standard sankey:

    library(purrr) 
    library(tidyverse)
    library(highcharter)
    
    # data
    df <- tibble(from = c("Brazil", "Brazil", "Poland", "Spain", "Poland"),
                 toto = c("Portugal", "Spain", "Portugal", "Brazil", "Poland"),
                 exports = c(5324523.4523, 232452345.234, 2345234.52345, 3234523.45234, 63452345.2345),
                 head = "Exports")
    
    
    # standard sankey
    highchart() %>%
      hc_add_series(
        type = "sankey",
        data = df |> pmap(~ list(from = ..1, to = paste0(..2, ' '), weight = ..3, head = ..4))
      )

And with formatted tooltips (but only working for the links and not for the nodes):

# formatted tooltips (but tooltips for nodes dont work)
highchart() %>%
  hc_add_series(
    type = "sankey",
    data = df |> pmap(~ list(from = ..1, to = paste0(..2, ' '), weight = ..3, head = ..4))
  ) |>
  hc_tooltip(formatter = JS("function () { return this.point.head + ': ' +'<b>' +
                             this.point.from + ' to ' +
                             this.point.to + '</b><br /> ' +
                             Highcharts.numberFormat(this.point.weight)
                            }"
  )
  )

Screenshot:

enter image description here

I tried to follow https://jsfiddle.net/BlackLabel/romtnqx5/ but I cannot make it work.

I am just able to change only the the tooltips for the nodes, but it works only when I just put text into it and without changing the tooltips for the links:

highchart() %>%
  hc_add_series(
    type = "sankey",
    data = df |> pmap(~ list(from = ..1, to = paste0(..2, ' '), weight = ..3, head = ..4, sum = ..5))
  ) |>
  hc_tooltip(
    nodeFormatter =  JS("function() {
    return 'only text works'
  }")
    # ,
    # formatter = JS("function () { return this.point.head + ': ' +'<b>' +
    #                          this.point.from + ' to ' +
    #                          this.point.to + '</b><br /> ' +
    #                          Highcharts.numberFormat(this.point.weight)
    #                         }"
    # )
  )

Thanks for any suggestions!

Tags:

2

Answers


  1. 0

    A series of type="sankey" allows to specify a tooltip formatter separately for the links (aka point) and the nodes using pointFormatter= and nodeFormatter= (see Different ToolTip text For Links and Nodes in Highcharts Sankey Charts):

    library(tidyverse)
library(highcharter)

# data
df <- tibble(
  from = c("Brazil", "Brazil", "Poland", "Spain", "Poland"),
  toto = c("Portugal", "Spain", "Portugal", "Brazil", "Poland"),
  exports = c(5324523.4523, 232452345.234, 2345234.52345, 3234523.45234, 63452345.2345),
  head = "Exports"
)


# standard sankey
highchart() |>
  hc_add_series(
    type = "sankey",
    data = df |> pmap(~ list(from = ..1, to = paste0(..2, " "), weight = ..3, head = ..4)),
    tooltip = list(
      nodeFormatter = JS(
        "function () {",
        "console.log(this);",
        "return this.name + ': ' +'<b>' +",
        "Highcharts.numberFormat(this.sum)",
        "}"
      ),
      pointFormatter = JS(
        "function () {",
        "return this.head + ': ' +'<b>' +",
        "this.from + ' to ' +",
        "this.to + '</b><br /> ' +",
        "Highcharts.numberFormat(this.weight)",
        "}"
      )
    )
  )
    Login or Signup to reply.
  2. 0

    In addition to stefan answer, you can also utilize the nodeFormat & pointFormat string templating, which is recommended over using custom formatter callbacks.

     highchart() %>%
  hc_add_series(
    type = "sankey",
    data = df |> pmap(~ list(from = ..1, to = paste0(..2, ' '), weight = ..3, head = ..4))
  ) |>
  hc_tooltip(
    nodeFormat = "{point.name}: {point.sum}"
  )

    API:
    https://www.highcharts.com/docs/chart-concepts/templating
    https://api.highcharts.com/highcharts/series.sankey.tooltip.nodeFormat

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search