How to edit the score ranges in highcharter-histogram tooltip

Question

I am using the highcharter package to make a histogram. I want to get rid of the default score range display -(x, y]- and replace it with something that reads: score ranges: x to y

library(highcharter)
apple <- c(0, 22, 5, 32, 34, 35, 56, 67, 42, 67, 12, 99, 46, 78, 43, 67, 33, 11)
hchart(apple, color = "#a40c19", breaks = 20) %>% 
  hc_yAxis(title = list(text = "Number of Apples")) %>% 
  hc_xAxis(title = list(text = "Score (0-100)")) %>%
  hc_tooltip(borderWidth = 1, sort = TRUE, crosshairs = TRUE,
             pointFormat = "Score Range: {point.x} to {point.x} <br> Number of Apples: {point.y}") %>%
  hc_legend(enabled = FALSE)

For example, in the picture below, I want to get rid of the heading (30, 35] and replace it with Score Range: 30 to 35.

Answer 1

First of all you need to know what is the interval length of your histogram:

library(highcharter)
apple <- c(0, 22, 5, 32, 34, 35, 56, 67, 42, 67, 12, 99, 46, 78, 43, 67, 33, 11)

h <- hist(apple, breaks = 20)
d <- diff(h$breaks)[1]
d
> d
[1] 5

Now, you need to use pointFormatter instead of pointFormat because allow you to have more control in the output of the tooltip. pointFormat need a string template and pointFormatter need a javascript function.

You put the delta in that function to get the right limits in for every interval. Obviously you can do it more elegant but that's the idea.

hchart(h, color = "#a40c19", breaks = 20) %>% 
  hc_yAxis(title = list(text = "Number of Apples")) %>% 
  hc_xAxis(title = list(text = "Score (0-100)")) %>%
  hc_tooltip(borderWidth = 1, sort = TRUE, crosshairs = TRUE,
             headerFormat = "",
             pointFormatter = JS("function() {
return 'Score Range:'  + (this.x - 5/2) + ' to ' + (this.x + 5/2) + '<br> Number of Apples:' +  this.y;    
             }")) %>%
  hc_legend(enabled = FALSE)

Finally you use headerFormat = "" to remove the header.