First, you should load recharts:

library(recharts)

1 Introduction

Tooltip is the key widget for interaction. It could take effect globally or locally. You can either use setTooltip (setTT) or setSeries to do the trick.

When you use tooltip, you are recommended to learn some basics about JavaScript to make full use of formatter template.

The recommended approach to use setTT is chart %>% setTT(...).

2 Function Call

All the function names have two forms: small camel and lowercase_underscore (endorsed by Hadley Wickham). To be lazy, we also provide short forms as well (e.g., tt for tooltip).

setTooltip(chart, series = NULL, timeslots = NULL, trigger = NULL,
  formatter = NULL, islandFormatter = "{a} < br/>{b} : {c}",
  position = NULL, enterable = FALSE, axisPointer = NULL,
  textStyle = NULL, showDelay = 20, hideDelay = 100,
  transitionDuration = 0.4, bgColor = "rgba(0,0,0,0.7)",
  borderColor = "#333", borderWidth = 0, borderRadius = 4, show = TRUE,
  ...)
  
setTT(chart, series = NULL, timeslots = NULL, trigger = NULL,
  formatter = NULL, islandFormatter = "{a} < br/>{b} : {c}",
  position = NULL, enterable = FALSE, axisPointer = NULL,
  textStyle = NULL, showDelay = 20, hideDelay = 100,
  transitionDuration = 0.4, bgColor = "rgba(0,0,0,0.7)",
  borderColor = "#333", borderWidth = 0, borderRadius = 4, show = TRUE,
  ...)

set_tt(chart, series = NULL, timeslots = NULL, trigger = NULL,
  formatter = NULL, islandFormatter = "{a} < br/>{b} : {c}",
  position = NULL, enterable = FALSE, axisPointer = NULL,
  textStyle = NULL, showDelay = 20, hideDelay = 100,
  transitionDuration = 0.4, bgColor = "rgba(0,0,0,0.7)",
  borderColor = "#333", borderWidth = 0, borderRadius = 4, show = TRUE,
  ...)

set_tooltip(chart, series = NULL, timeslots = NULL, trigger = NULL,
  formatter = NULL, islandFormatter = "{a} < br/>{b} : {c}",
  position = NULL, enterable = FALSE, axisPointer = NULL,
  textStyle = NULL, showDelay = 20, hideDelay = 100,
  transitionDuration = 0.4, bgColor = "rgba(0,0,0,0.7)",
  borderColor = "#333", borderWidth = 0, borderRadius = 4, show = TRUE,
  ...)

Arg	Requirement
chart	Echarts object generated by `echartR` or `echart`.
series	A vector of series indices or names. e.g., `c('setosa', 'virginica')` or 1:2
timeslots	A vector of time slices indices or names, e.g., `c(1990, 1992)` or `c(1,3)`. You can also use `z` as a short form of timeslots.
trigger	Type of trigger, ‘item’ or ‘axis’
formatter	The format of the tooltip content. String (template) {a} / {a0} {b} / {b0} {c} / {c0} {d} / {d0} (not applicable for some types) {e} / {e0} (not applicable for some types) function the JS list is the form `[params, ticket, callback]` Meaning of {a}, {b}, {c}, {d}: line, bar, k a(series name), b(category name), c(value) scatter a(series name), b(data name), c(value arr map a(series name), b(area name), c(combined value) pie, radar, gauge, funnel a(series names), b(data item name), c(value), d(pie:percent\|radar:indicator) force, chord nodes: a(series name), b(node name), c(node value), d(node type index) links: a(series name), b(link name), c(link value), d(big node name/index), e(small node/index) JS Function Param Template… `seriesIndex`: 0, 1, 2, … `seriesName`: ‘Monday’, ‘Tuesday’, … `name`: ‘day1’, ‘day2’, … `dataIndex`: 0, 1, 2, … `data`: data `value`: value `percent`: special //pie `indicator`: special //radar, force, chord `value2`: special2 //force, chord `indicator2`: special2 //force, chord
islandFormatter	Data island formatter, default `{a}<br/>{b}: {c}`.
position	Can be fixed position array `c(x, y)` or a JS function, e.g., `JS('function([x, y]) {return [newX,newY]}')`. Default NULL.
enterable	If users can click into the tooltip for interacions. Default FALSE.
axisPointer	The pointer formatter of axis. Default is a list `list(type = "line",` `lineStyle = list(color = "#48b",` `width = 2, type = "solid"),` `crossStyle = list(color = "#1e90ff",` `width = 1, type = "dashed"),` `shadowStyle = list(color =` `"rgba(150,150,150,0.3)", width = "auto", type = "default")).`
textStyle	Text style of the tooltip. In a list form. Default `list(color ="#fff")`. The list coud contain elements of `color, decoration, fontSize, fontFamily, fontStyle, fontWeight, align, baseline`.
showDelay	Delayed time at show (ms). Default 20ms.
hideDelay	Delayed time at hide (ms). Default 100ms.
transitionDuration	The time spent at animation exchange. Default 0.4. Set if 0 if you want real-time interaction.
bgColor	Background color of tooltips. Default ‘rgba(0,0,0,0.7)’ (semi-transparent dark gray).
borderColor	Borderline color of the tooltips. Default ‘#333’.
borderWidth	Border width of the tooltips. Default 0 (not shown).
borderRadius	Border radius of the tooltips. Default 4px.
show	Logical. If the tooltips are shown. Default TRUE.
…	Elipsis.

3 Showcase

g <- echartr(iris, Sepal.Width, Petal.Width, Species,  weight=Petal.Length,
             type='bubble') %>% setSymbols('circle')
g

3.1 Global Setting

Hover the mouse over the data points and you’ll find that the default formatter of the tooltip in bubble charts is series:\nx, y, weight, i.e., in JavaScript:

function (params) {
    var i;
    var text;
    if (params.seriesName === null || params.seriesName === ""){
        if (params.value.length > 1) {
            text = params.value[0];
            for (i = 1; i < params.value.length; i++){
                text += " ,    " + params.value[i];
            }
            return text;
        } else {
            return params.name + " : " + params.value;
        }
    } else {
        if (params.value.length > 1) {
            text = params.seriesName + " :<br/>" + params.value[0];
            for (i = 1; i < params.value.length; i++) {
                text += " ,    " + params.value[i];
            }
            return text;
        } else {
            return params.seriesName + " :<br/>"
            + params.name + " : " + params.value;
        }
    }
}

3.1.1 Formatter

You can change the formatter a little bit.

g %>% setTT(formatter=JS('function (params) {
  return params.seriesName + "<br/>Sepal Width: " + params.value[0] +  
  "<br/>Petal Width: " +  params.value[1] + "<br/>Petal Length: " + 
  params.value[2];
}'))

Now it becomes series:\n<x: >...\n<y: >...\n<weight: >....

3.1.2 Trigger

The trigger for scatterplots are axis by default. If change it to item, the axisPointer effect is disabled.

g %>% setTT(trigger='item')

3.1.3 Aesthetics

Change the bgColor or other aesthetics as you like.

g %>% setTT(bgColor='green')

3.2 Local Setting

If you only want to change the tooltip in some of the series, you can assign specific series or timeslots.

g %>% setTT(1, bgColor='orange', textStyle=textStyle(
        fontFamily='Times New Roman', color='black')) %>% 
    setTT(2, bgColor='lightblue', textStyle=textStyle(
        fontFamily='Courier New', color='black')) %>%
    setTT(3, bgColor='purple', textStyle=textStyle(fontFamily='Verdana'))

4 References

http://echarts.baidu.com/echarts2/doc/option.html#title~tooltip

Widget 31 - Tooltip