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

btw. changed `data = data[,c("month","tokyo","new_york")]` to `data <- citytemp[,c("month","tokyo","new_york")]` — nilsole, Sep 03 '16 at 17:47

score 2 · Accepted Answer · edited May 23 '17 at 10:32

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)

In addition, I found another working example here: http://www.tutorialspoint.com/execute_r_online.php?PID=0Bw_CjBb95KQMTVNvR2cyUEQ4WWs Originally taken from and a little adapted: http://jkunst.com/highcharter/shiny.html — nilsole, Sep 03 '16 at 16:54
Hello ! thank you very much for your prompt response ! :) Yes, that is great and works well ! But actually I wanted to add the information about NY, without ading the curve related to it. Is there any way to handle it ? I assume that making the curve transparent may work for example ? — Madzia, Sep 04 '16 at 11:46
Highcharts comes with a `series[x].hide()` function. Read more about that here: http://stackoverflow.com/questions/8880748/hiding-a-highcharts-series-without-using-the-legend ; however, the NY series is then still appearing in the legend I guess. You could as well make Highcharts create the series data first (with hidden series), then grab the series data array with a javascript and store it somewhere else. Third step would be to remove the hidden series from Highcharts again. The advantage is you do not need to do any data logic on your own. — nilsole, Sep 04 '16 at 11:51
a starting point would be: `hc_series( list( name = "Tokyo", data = data$tokyo), list( name = "New York", data = data$new_york, visible = FALSE) ) %>%` — nilsole, Sep 04 '16 at 11:56
Hey Nisole ! Thank you again for your help, I have been through some documentation on the internet and it looks like it is easier when you have both data on the chart , I made the NY curve transparent and it works well (actually it is ok for me if it remains in the legend). Thank you for the solution you proposed, it looks better than the transparent color but a bit more complicated for me so I wil investigate :). Thank you again ! — Madzia, Sep 04 '16 at 13:48

Tooltip content within a highchart in Rshiny

1 Answers1

Linked