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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Vaadin Charts Data Types
Hi,
is there any way to pass some additional data to the series object that will use to show in the chart 'tooltip'?
In highchart I can create a Chart which data are made like this:
series: [{ name: 'Foo', data: [ { y : 3, myData : 'firstPoint' }, { y : 7, myData : 'secondPoint' }, { y : 1, myData : 'thirdPoint' } ] }]
i.e. Data Series has these properties:
- name
- x
- y
- mydata
so in the tooltip is possible to use 'MyData' property as shown in http://jsfiddle.net/japanick/dWDE6/314/
I can do the same thing using Vaadin Charts and its DataSeries? How?
Thank you all in advance.
Hi Luca,
It is possible to add extra data yes.
For the use case you mentioned there's no need to add extra data, you can use DataSeriesItem class which already has 'x', 'y' and 'name' properties.
I did a small example of the chart in your jsfiddle using DataSeriesItem(String name, Number y) constructor and it looks quite simple:
Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
conf.getTooltip().setFormatter(
"'Extra data: <b>' + this.point.name + '</b>'");
DataSeries series = new DataSeries();
series.add(new DataSeriesItem("firstPoint", 3));
series.add(new DataSeriesItem("secondPoint", 7));
series.add(new DataSeriesItem("thirdPoint", 1));
conf.setSeries(series);
If 'name' property is not enough you can extend DataSeriesItem to add extra properties, just be sure that DataSeriesItem makeCustomized method is called at some point so that the point is serialized correctly.
Hope this helps,
Guille
The second option would look like this:
public class DataSeriesItemWithExtraProperty extends DataSeriesItem {
private String myData;
public DataSeriesItemWithExtraProperty(Number x, Number y, String myData) {
super(x, y);
this.myData = myData;
makeCustomized();
}
public String getMyData() {
return myData;
}
public void setMyData(String myData) {
this.myData = myData;
}
}
And the chart would be like:
Chart chart = new Chart();
Configuration conf = chart.getConfiguration();
conf.getTooltip().setFormatter(
"'Extra data: <b>' + this.point.myData + '</b>'");
DataSeries series = new DataSeries();
series.add(new DataSeriesItemWithExtraProperty(1, 3, "firstPoint"));
series.add(new DataSeriesItemWithExtraProperty(2, 7, "secondPoint"));
series.add(new DataSeriesItemWithExtraProperty(3, 1, "thirdPoint"));
conf.setSeries(series);
Regards,
Guille
I tried your second option and it works!
Thank you very very very much!
Regards,
Luca