Search code examples
rhighchartsr-highcharter

Hyperlink bar chart in Highcharter


I'm having trouble recreating this answer in R with Highcharter to make the bars in a bar chart into clickable URLs. Here is the Javascript code from the answer. Highcharter has a vignette about recreating Javascript that I tried to follow. Here's what tried so far. It doesn't show any of the bars.

library(tidyverse)
library(highcharter)

highchart() %>%
  hc_chart(type = "column") %>%
  hc_title(text = "Click points to go to URL") %>%
  hc_xAxis(type = "category") %>%
  hc_plotOptions(series = list(cursor = "pointer"),
                 point =
                   list(events = list(
                     click = JS(
                       "function () {
                       location.href = 'https://en.wikipedia.org/wiki/' +
                       this.options.key;
                       }"
                     )
                     ))) %>%
  hc_series(
    list(name = "USA", key = "United_States", y = 29.9),
    list(name = "Canada", key = "Canada", y = 71.5),
    list(name = "Mexico", key = "Mexico", y = 106.4)
  )

Solution

  • Andrew,

    You have some (2) errors replicating the example:

    1. If you check carefully the example you gave. The point argument lives at the same depth of cursor in the series argument.
    2. You didn't add the data in the correct way (like the vignette show).

    A fixed version of your code is:

    highchart() %>%
      hc_chart(type = "column") %>%
      hc_title(text = "Click points to go to URL") %>%
      hc_xAxis(type = "category") %>%
      hc_plotOptions(
        series = list(
          cursor = "pointer",
          point = list(
            events = list(
              click = JS( "function () { location.href = 'https://en.wikipedia.org/wiki/' + this.options.key; }")
              )
            )
          )
        ) %>%
      hc_series(
        list(
          data = list(
            list(name = "USA", key = "United_States", y = 29.9),
            list(name = "Canada", key = "Canada", y = 71.5),
            list(name = "Mexico", key = "Mexico", y = 106.4)
            )
          )
      )
    

    And a better version to add the data would be:

    dat <- data.frame(
      country = c("USA", "Canada", "Mexico"),
      url = c("United_States", "Canada", "Mexico"),
      value = c(29.9, 71.5, 106.4)
    )
    
    highchart() %>%
      hc_xAxis(type = "category") %>%
      hc_plotOptions(
        series = list(
          cursor = "pointer",
          point = list(
            events = list(
              click = JS( "function () { location.href = 'https://en.wikipedia.org/wiki/' + this.options.key; }")
              )
            )
          )
        ) %>%
      hc_add_series(data = dat, type = "column", mapping = hcaes(name = country, key = url, y = value))
    

    Hope its helps