Vaadin Charts 2 shared tooltip example

Question

I need an example of a shared tooltip in Vaadin Charts 2. This means for one slot on the X-axis, multiple Y-axis values are shown together in a single tooltip box.

The Vaadin Charts Demo has a Lines with Complex Html tooltip showing such a shared tooltip. Note how data points in both series (halos around red diamond and blue dot) are shown highlighted while a single tooltip box displays both data points’ values.

An excerpt from the Demo’s displayed source code.

Tooltip tooltip = new Tooltip() ;
tooltip.setShared( true ) ;
tooltip.setUseHTML( true ) ;
tooltip.setHeaderFormat( "{point.key}" ) ;
tooltip.setPointFormat( "" ) ;
tooltip.setFooterFormat( "{series.name}: {point.y} EUR" ) ;

However, adapting that code to my own project fails. My X-axis is a date-time DataSeries.

• GOOD
  The point.key successfully renders as a date-time string.
• BAD
  The {series.name}: {point.y} appears literally rather than being interpreted to render a value.

Perhaps someone can post a simple complete example?

Answer 1

It looks like you copied the data from the Vaadin Charts Demo - however their source renderer has rendered the HTML. Have a look at the original class in git:

tooltip.setHeaderFormat("<small>{point.key}</small><table>");
tooltip.setPointFormat("<tr><td style=\"color: {series.color}\">{series.name}: </td><td style=\"text-align: right\"><b>{point.y} EUR</b></td></tr>");
tooltip.setFooterFormat("</table>");