Get started
Loading...
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
TUTORIAL

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

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Charts - possible to have custom tooltip properties via ContainerDataSeries

Scott Tatum
5 years ago Jan 04, 2017 8:36pm

Hi, I've run into a problem that I can't seem to find a solution for. I am using the charts add-on version 3.0.0. In my specific case, I am displaying a chart of lab components. Each component has has a date and a value, as well as several other properties that I want to display in the tooltip (source, high/low normal range). Also, if an individual lab is out of its normal range, I want to change the color of the point and make it red.

At first, I started with DataSeries/DataSeriesItem, which let me color out of range points red, but the tooltip could only display the x and y values, and not the source and normal range values. After researching, I found that I could use a ContainerDataSeries along with an object with all the properties I wanted to display. Then I could use addAttributeToPropertyIdMapping to map additional properties into the series, which I could then refer to with a custom tooltip formatter, which is great - except now I've lost the ability to change the color on individual points! Ideally, the ContainerDataSeries object could allow me to set a property which it could interpret as the color for a given item, but it doesn't as far as I can tell.

Does anyone know of a way to do this? Any insight would be greatly appreciated.

-Scott
 

Scott Tatum
5 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.

-Scott

+1