Vaadin Charts Tooltip setFormatter


I’m having a hard time configuring my tooltips in vaadin charts addon v1.1.7.
Currently, I’m setting the tooltip as following:

... Tooltip tooltip = new Tooltip(); tooltip.setHeaderFormat("<b>{this.x}</b><br>"); tooltip.setShared(true); tooltip.setPointFormat("{}: {point.y}"); tooltip.setValueSuffix("%"); chartConfiguration.setTooltip(tooltip); ... While this perfectly works, I want a more complex tooltip, like all series names and corresponding values for one category. In Highcharts, this would look like this
(please check the formatter property). However, placing a javascript function into “setPointFormat” or even “setFormatter” doesn’t work, it always fails to find any of the objects (series, points, etc).
Is it even possible to do the following?

tooltip.setFormatter("function() {this.points.forEach(point){...};}"); //example code Would be nice if someone could share his/her experiences.
Thanks in advance!


Try this:

function() { var d = new Date(this.x);"

  • "return " +
    “‘’ +'
    ” +
    Value : ‘+ this.y +’
    ” +
    "Time : '+d.toUTCString(); " +


This is maybe something more of what you are looking for (Taken from the High Charts Demo - with an additional formatted date for x if used):

getTooltip().setFormatter( "function() { " + "var s = []; " + "var d = new Date(this.x);" + "s.push('<b>' + d.toUTCString() + '</b><br>'); " + "this.points.forEach( function(point) { " + "s.push( + ': ' + point.y + '<br>'); }); " + "return s.join('');"); and if you want to show all your points, make sure to set:

getTooltip().setShared(true); Regards,