CODEWITHSUNDEEP
javavaadinvaadin-charts
Basil Bourque
Basil Bourque

Reputation: 339659

Vaadin Charts 2 shared tooltip example

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.

Screen shot of example chart with a tooltip shared between two data points.

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.

Perhaps someone can post a simple complete example?

Upvotes: 2

Views: 1371

Answers (1)

user5857134
user5857134

Reputation: 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>");

Upvotes: 0

Related Questions