Search code examples
vaadinvaadin-flowvaadin14vaadin-charts

Vaadin 14 FlagItems not aligned correctly on ListSeries

I've got a problem regarding the FlagItem in Vaadin 14.

I'm trying to set a FlagItem for a specific point in a ListSeries, I'm doing this the following way:

PlotOptionsFlags plotOptionsFlags = new PlotOptionsFlags();
plotOptionsFlags.setOnSeries(wageEntry.getEmployeeCode());
plotOptionsFlags.setShape(FlagShape.SQUAREPIN);
plotOptionsFlags.getTooltip().setPointFormat("Wage: {point.y}");
plotOptionsFlags.getTooltip().setHeaderFormat("");
plotOptionsFlags.setShowInLegend(false);
DataSeries flagsSeries = new DataSeries();
flagsSeries.setName(wageEntry.getEmployeeCode().concat(" Current Wage"));
flagsSeries.setPlotOptions(plotOptionsFlags);
for (WageEntry wage : employeeWageEntries) {
    if (wage.getWageYear() == LocalDate.now().getYear()) {
       flagsSeries.add(new FlagItem(wage.getAge() - 22, wage.getEmployeeCode().concat(" - ").concat(String.valueOf(wage.getWageAmount()))));
    }
}
comparisonChartConfiguration.addSeries(flagsSeries);

As you can see, I set the x value relative to the age of an entry, and the text. More over the FlagItem is only created when a certain condition is met. (I used the Vaadin Chart Demo as reference: https://demo.vaadin.com/charts/Flags)

The problem now is, that when the chart is being built, the FlagItem appear on the x axis instead as you can see here:

enter image description here

I really don't understand why this happens.

Maybe it's useful to know, that on the chart three RangeSeries and multiple ListSeries are being drawn.

Thanks for the help!

Solution

  • So I've found out where the problem was. It was something that wasn't added to the code above, so please have mercy.

    The issues lied withing the fact that I didn't add the ListSeries to the comparisonChartConfiguration before creating the flagsSeries.

    In short, you need to add the Series you want to append flags on to the ChartConfiguration before you can attach the flagsSeries onto another.