Madzia Madzia - 2 months ago 20
R Question

Tooltip content within a highchart in Rshiny

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

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: http://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)
Comments