Tooltip content within a highchart in Rshiny

Question

Good afternoon All :),

I have a little problem with a tooltip within a highchart on a Rshiny chart. I reproduced the problem in a simplified example, requiring 'highchart' and 'shiny' librairies. Here is the code :

library("shiny")
library("highcharter")

data(citytemp)

ui <- fluidPage(
    h1("Highcharter EXAMPLE"),
    fluidRow(
        column(width = 8,
               highchartOutput("hcontainer",height = "500px")
        )
    )
)

server = function(input, output) {
    data = data[,c("month","tokyo","new_york")]
    output$hcontainer <- renderHighchart({
      hc <-  highchart() %>% 
            hc_chart(type = "line") %>% 
            hc_title(text = "Monthly Average Temperature for TOKYO") %>% 
            hc_subtitle(text = "Source: WorldClimate.com") %>% 
            hc_xAxis(categories = c('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')) %>% 
            hc_yAxis(title = list(text = "Temperature (C)")) %>% 
          hc_tooltip(pointFormat = '<span style="color:{series.color}">As for NY: </span>:
                       <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
                     followPointer=TRUE,
                     shared = TRUE)%>% 
            hc_plotOptions(line = list(
                dataLabels = list(enabled = TRUE),
                enableMouseTracking = FALSE)
            ) %>% 
            hc_series(
                list(
                    name = "Tokyo",
                    data = data$tokyo))      
        hc

    })

}

shinyApp(ui = ui, server = server)

I have a problem with the tooltip, I cannot understand why it does not work ? It does not appear on the app while launched. Also, I would like the tooltip to contain the data from another series (here New york) - is that feasible or the tooltip can only refer to the line on the chart ? thank you very much for your help ! All the best, madzia

Answer 1

When you set the plot option enableMouseTracking to TRUE in your example, the tooltips appear.

I also editied the tooltip with javascript to make the shared data accessible, according to this post: https://stackoverflow.com/a/19315076

Does that help you? :)

library("shiny")
library("highcharter")

data(citytemp)

ui <- fluidPage(
  h1("Highcharter EXAMPLE"),
  fluidRow(
    column(width = 8,
           highchartOutput("hcontainer",height = "500px")
    )
  )
)

server <- function(input, output) {
  data <- citytemp[,c("month","tokyo","new_york")]
  output$hcontainer <- renderHighchart({
    hc <-  highchart() %>% 
      hc_chart(type = "line") %>% 
      hc_title(text = "Monthly Average Temperature for TOKYO") %>% 
      hc_subtitle(text = "Source: WorldClimate.com") %>% 
      hc_xAxis(categories = c('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec')) %>% 
      hc_yAxis(title = list(text = "Temperature (C)")) %>% 
      hc_series(
        list(
          name = "Tokyo",
          data = data$tokyo),
        list(
          name = "New York",
          data = data$new_york)
        )   %>%
      hc_tooltip(
formatter = JS("function() {

    var s = [];

    $.each(this.points, function(i, point) {
        s.push('<span style=\"color:' + point.series.color + ';font-weight:bold;\">' + point.series.name + ' : ' + point.y + '<span>');
    });

    if (this.points.length === 2) {
        s.push('<span>Second point is ' + Math.round((this.points[1].y / this.points[0].y) * 100) + '% of first point.</span>');

    }

    return s.join('<br/>');

}"),
                followPointer=TRUE,
                 shared = TRUE) %>% 
      hc_plotOptions(line = list(
        dataLabels = list(enabled = TRUE),
        enableMouseTracking = TRUE
        )
      )
    return(hc)
  })
} 

shinyApp(ui = ui, server = server)