I would like to add some extra values to the standard Highcharts tooltip via rCharts. Example code:
require(rCharts)
df <- data.frame(x = c(1:5), y = c(5:1),
z = c("A", "B", "C", "D", "E"),
name = c("K", "L", "M", "N", "O"))
h1 <- hPlot(x = "x", y = "y", data = df, type = "scatter", group = "z")
This generates a tooltip with the x and y values. And the series name z as title. Now I also want the to add the name values to the tooltip. However I have no idea how this is done.
rCharts
is a great package. But it still not well documented(Maybe I miss this point). I think you need to redefine new JS function for tooltip
attribute.
Any JS literals need to be wrapped between #! and !# . Here a beginning but it doesn't work as I imagine ( I think is a good start):
h1$tooltip( formatter = "#! function() { return 'x: ' + this.point.x +
'y: ' + this.point.y +
'name: ' + this.point.group; } !#")
After several years, I have an answer.
It seems like these wrapper functions like hPlot()
does not support additional tooltip variables even with a simple custom formatter function. See working example below based on the dataset from the question.
require(rCharts)
# create data frame
df <- data.frame(x = c(1:5), y = c(5:1),
z = c("A", "B", "C", "D", "E"),
name = c("K", "L", "M", "N", "O"))
# Plot using hPlot() approach
h1 <- hPlot(x = "x", y = "y", data = df, type = "scatter", group = "z")
h1$tooltip(borderWidth=0, followPointer=TRUE, followTouchMove=TRUE, shared = FALSE,
formatter = "#! function(){return 'X: ' + this.point.x + '<br>Y: ' + this.point.y + '<br>Z: ' + this.point.z + '<br>Name: ' + this.point.name;} !#")
h1
Tooltips do not work in the above example because the variables in the array are not named. See str(h1)
.
# Plot using manual build
h1 <- rCharts:::Highcharts$new()
dlev <- levels(factor(as.character(df$z)))
for(i in 1:length(dlev))
{
h1$series(data = toJSONArray2(df[df$z==dlev[i],,drop=F], json = F,names=T), name = dlev[i],type = c("scatter"), marker = list(radius = 3))
}
h1$tooltip(borderWidth=0, followPointer=TRUE, followTouchMove=TRUE, shared = FALSE,
formatter = "#! function(){return 'X: ' + this.point.x + '<br>Y: ' + this.point.y + '<br>Z: ' + this.point.z + '<br>Name: ' + this.point.name;} !#")
h1
This works because the array variables are named using names=T
in the line starting h1$series...
. See str(h1)
.
This sort of solves the tooltip issue, but there might be other problems with the named arrays. For example, it breaks things in a shiny-app environment. There must be a reason why hPlot()
does not use the named arrays.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With