HighcharteR not showing path at level with drilldown

Question

I'm currently working on creating a drill-down plot using Highchart in R. I've been experimenting with the following example code:

library(highcharter)
library(dplyr)
library(purrr)

df <- tibble(
  name = c("Animals", "Fruits"),
  y = c(5, 2),
  drilldown = tolower(name)
)

df
#> # A tibble: 2 × 3
#>   name        y drilldown
#>   <chr>   <dbl> <chr>    
#> 1 Animals     5 animals  
#> 2 Fruits      2 fruits   

hc <- highchart() |>
  hc_title(text = "Basic drilldown") |>
  hc_xAxis(type = "category") |>
  hc_legend(enabled = FALSE) |>
  hc_plotOptions(
    series = list(
      boderWidth = 0,
      dataLabels = list(enabled = TRUE)
    )
  ) |>
  hc_add_series(
    data = df,
    type = "column",
    hcaes(name = name, y = y),
    name = "Things",
    colorByPoint = TRUE
  )

dfan <- data.frame(
  name = c("Cats", "Dogs", "Cows", "Sheep", "Pigs"),
  value = c(4, 3, 1, 2, 1)
)

dffru <- data.frame(
  name = c("Apple", "Organes"),
  value = c(4, 2)
)


dsan <- list_parse2(dfan)

dsfru <- list_parse2(dffru)

hc <- hc |>
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list(
      list(
        id = "animals",
        data = dsan
      ),
      list(
        id = "fruits",
        data = dsfru
      )
    )
  )

hc

Everything seems to be working correctly, except for one issue: I'm unable to display the drill-down path on the chart as desired.

Desired Result from this example :

Actual Result:

Any help would be greatly appreciated.

Thanks in advance.

Answer 1

The problem is the version of the javascript highcharts that is installed with your highcharter. The latest version of highcharter - 0.9.4 is using highcharts.js version 9.3.1

On highcharts js doc site we see on drilldown.drillUpButton that is deprecated from v 9.3.2 in favour of drilldown.breadcrumbs.

So, what we are seeing on a 0.9.4 version is the "drill up button", and what you want (and what is shown in the example page you linked to) is the "breadcrumbs".

How come then that the example page is using the breadcrumbs? Because there is a dev version of highcharter -- 0.9.4.9000 (see the changelog), which indeed uses version 10.2.0 of the javascript highcharts library.

In v0.9.4 there are no breadcrumbs, all you can do is disable the drill up button (drillUpButton = NULL in the hc_drilldown call). So the only solution is to update highcharter to the dev version.

There are multiple ways in which you may do that. I used

library(devtools)
install_dev('highcharter')

It recommended that it would automatically update several other packages, including dplyr, which I accepted.

With this update, and no change to your code, the breadcrumbs appear as shown on the example page.