Adding custom Tooltip in R amCharts

Question

I am using a JS library called amCharts in R for interactive visualization as bellow.

In my plot, I want to use custom HTML text in the Tooltip (i.e. Balloon). So tried with below code :

library(rAmCharts)
Dat = data.frame(x = paste(as.character(-10:10), "%", sep = ""), y = -10:10,
                    z_Balloon = paste("<p style='font-size: 120%; font-weight: bold; margin-bottom: 15px;''></p>
                                          <table>
                                            <tr><th>People Name</th></tr>\
                                            <tr><td>", -10:10, "</td></tr></table>", sep = ""))

###However for '0' there shall not be any Balloon text
Dat[11, 3] = "<NA>"

amPlot(x = Dat$x, y = Dat$y, type = 'line', fill_alphas = .5, balloonText = Dat$z_Balloon)

However, as you see, my code was not able to change the Tooltip.

I would really appreciate if someone guide me towards right direction.

Thanks,

***** Update based on Marco's suggestion**

I have updated Marco's code to be able to display no Balloon for X = 0 :

library(rAmCharts)
Dat = data.frame(x = paste(as.character(-10:10), "%", sep = ""), y = -10:10)

balloonFunction <- htmlwidgets::JS(
    "function(item) {",
    "if (item.category != '0%') {",
    "return \'X: \' + item.category + \'<br>Y: \' + item.values.value;",
    "}",
    "else {",
    "return NULL",
    "}",
    "}")

p <- amPlot(x=Dat$x, y=Dat$y, type='line', fill_alphas=0.5) 
p@graphs[[1]]$balloonFunction <- balloonFunction
setBalloon(p, cornerRadius=10, color="white", fillColor="red", textAlign="left")

However, still, I could not be able to find a way on how to incorporate the 3rd variable to display the Balloon.

Any idea will be highly appreciated.

Answer 1

Here is a possibile solution:

library(rAmCharts)
library(purrr)
set.seed(1)
Dat = data.frame(x = paste(as.character(-10:10), "%", sep = ""), y = -10:10, z=rnorm(21))

balloonFunction <- htmlwidgets::JS(
    'function(item) {',
    'if (item.category!="0%") { return \'X: \' + item.category + 
                               \'<br>Y: \' + item.values.value +
                               \'<br>Z: \' + item.dataContext[\'z\'];}',
    '}')

p <- amSerialChart(categoryField = "x", precision = 2) %>%
  setDataProvider(dataProvider = Dat, keepNA = TRUE) %>%
  addGraph(valueField = "y", lineColor = "gray", fillAlphas=0.5, 
           bullet="round", lineThickness=4) %>%
  setChartCursor() %>%
  setBalloon(cornerRadius=10, color="white", fillColor="red", textAlign="left")
p@graphs[[1]]$balloonFunction <- balloonFunction
p@valueAxes <- list(list(title='y-axis name', position='left', axisAlpha=0.5))
p@categoryAxis <- list(title='x-axis name', axisAlpha=0.5)
p