rickshaw.js displaying additional data in tooltips

Question

I have a richshaw plot with tooltips enabled (Rickshaw.Graph.HoverDetail). I need to display more information in it, not just series y values. Can it be accomplished with Richshaw or do I have to use the underlying d3 functions.

Answer 1

Sorry for the late response. Yes you can actually render whatever you want inside rickshaw tooltips with Rickshaw.Graph.HoverDetail .

Lets say for example that you have a function that requires as inputs series , x and y and lets assume that we have another array with the same length as x array called dates :

var hoverDetail = new Rickshaw.Graph.HoverDetail({
  graph: graph,
  formatter: function(series, x, y) {
    var content = '<span class="graph-dates">'+dates[x]+'</span><br><span class="graph-price">'+series.name+": "+currency+parseInt(y) +'</span>';
    return content;
  }
});

The code renders on the hover details a date for the chosen x point and the price for that date.

In the documentation of rickshaw graph you can find further information.

Here is the actual example by rickshaw.