Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Charts - possible to have custom tooltip properties via ContainerDataSeries

Scott Tatum
6 years ago Jan 04, 2017 8:36pm
Scott Tatum
6 years ago Jan 04, 2017 9:12pm

I was able to find somewhat of a solution, and maybe it will help someone in similar situation in the future.

What I did was I used two separate series, set the x and y on the first series, and the high/low on the second series. This allowed me to show whisker bars on the graph (using PlotOptionsErrorBar) for the normal ranges, which is a nice look. I set the color on the out-of-range values on the first series so they showed up red. Since the tooltip shows a line for each series, I provided a custom formatter for the second series:

tooltip.setPointFormat("(normal range: {point.low}-{point.high})<br/>Source: {point.id}");

This allowed me to show the reference range and the source. The total hack job is the source - I saw that there was a setId() on DataSeriesItem that is used to get a reference to the point object after rendering. I had no need for this so I tried using that field to store my source in, and it worked! I was worried since source is non-unique, but it doesn't seem to affect the graph. I think if I had needed any more fields, I would have been in trouble.

So there's my workaround, but I'd still be interested to hear if there is a better way.