Highchart Tooltip in R

Question

I Have two datasets (initial_tumors and modified_recurring_tumors).

dput:

initial_tumors:

structure(
  list(
    number = c(1L, 3L, 2L, 4L, 5L, 6L, 8L),
    count = c(145L,
              47L, 38L, 25L, 16L, 14L, 9L),
    tumor_category = c(
      "1 Tumor",
      "3 Tumors",
      "2 Tumors",
      "4 Tumors",
      "5 Tumors",
      "6 Tumors",
      "8 or more Tumors"
    )
  ),
  row.names = c(NA,-7L),
  class = c("tbl_df", "tbl", "data.frame")
)

data2:
modified_recurring_tumors:

structure(
  list(
    recur = c(NA, 5L, 1L),
    count = c(111L, 46L, 45L),
    tumor_category = c("8 or more Tumors", "5 Tumors", "1 Tumor")
  ),
  row.names = c(NA,-3L),
  class = c("tbl_df", "tbl", "data.frame")
)

I am plotting a graph using highchart for Initial Tumors vs Recurrent Tumors. I am using tooltip so that when mouse is hovered it shows the tumor_category details such as:

Initial Tumors: 4 Tumors Count:16

Recurrent Tumors: 4 Tumors Count:18

Am using following highchart code:

highchart() %>%
  hc_chart(type = "bubble") %>%
  hc_add_series(
    data = initial_tumors$count,
    name = "Initial tumors",
    type = "bubble",
    color = "purple",
    dataLabels = list(enabled = TRUE, format = "{point.y}")
  ) %>%
  hc_add_series(
    data = modified_recurring_tumors$count,
    name = "Recurring tumors",
    type = "spline",
    color = "red",
    dataLabels = list(enabled = TRUE, format = "{point.y}")
  ) %>%
  hc_tooltip(
    shared = FALSE,
    formatter = JS(
      "function() {
      var tumorCategory;
      if (this.series.name === 'Initial tumors' || this.series.name === 'Initial tumor categories') {
        tumorCategory = this.point.y;
      } else if (this.series.name === 'Recurring tumors' || this.series.name === 'Recurring tumor categories') {
        tumorCategory = this.point.y;
      }
      var tooltip = '<b>' + this.series.name + '</b><br>   : ' + tumorCategory + '<br>Count: ' + this.y;
      return tooltip;
    }"
    )
  )  %>%
  hc_title(text = "Initial vs Recurring Tumors")

But when I hover the mouse over the graph, it is not showing the tumor_category but is showing count.

How to correct it?

Answer 1

When you use hc_add_series you only passed in the column values; if you instead pass in the data.frame you can access other column data. Using hcaes you can define your y-axis value (count). In your formatter, you can use this.point.tumor_category to access the category, and this.point.count to access the count.

library(tidyverse)
library(highcharter)
  
highchart() %>%
  hc_chart(type = "bubble") %>%
  hc_add_series(
    data = initial_tumors,
    hcaes(y = count),
    name = "Initial tumors",
    type = "bubble",
    color = "purple",
    dataLabels = list(enabled = TRUE, format = "{point.y}")
  ) %>%
  hc_add_series(
    data = modified_recurring_tumors,
    hcaes(y = count),
    name = "Recurring tumors",
    type = "spline",
    color = "red",
    dataLabels = list(enabled = TRUE, format = "{point.y}")
  ) %>%
  hc_tooltip(
    shared = FALSE,
    formatter = JS(
      "function() {
        var tooltip = '<b>' + this.series.name + '</b>' + 
                      '<br>Tumor category: ' + this.point.tumor_category + 
                      '<br>Count: ' + this.point.count;
        return tooltip;
      }"
    )
  ) %>%
  hc_title(text = "Initial vs Recurring Tumors")