Configuring Vaadin Charts 3 flags series with Java

In this brief tutorial, I'll show you how to use the Flags series in Vaadin Charts 3. The same code snippets can be used with Vaadin Charts 4, but API calls using java.util.Date have been deprecated. As a basis for this tutorial, I'll use a chart created in a previous tutorial available here. The sample code for this and the previous tutorial are available here.

Chart showing average temperatures in Turku, Finland every July since 1961

Flag is a label you can add to follow a series, or to the x-axis.  By default, it resembles a small flag with a flag pole. You can select the shape from a few options. A flag is not a property of a point like a data label is, but a part of a separate flags series. Just add a new DataSeries to a chart configuration and add FlagItems to it.

Let's add a flag for each year the Earth's population broke a new billion. Our data starts from 1961 so let's start from 4 billion, which was reached in 1974.

DataSeries flagsOnAxis = new DataSeries();
flagsOnAxis.setName("Population Milestones");
flagsOnAxis.add(new FlagItem(localDateToDate(LocalDate.of(1974, 1, 1)), "Pop 4B"));
flagsOnAxis.add(new FlagItem(localDateToDate(LocalDate.of(1987, 1, 1)), "Pop 5B"));
flagsOnAxis.add(new FlagItem(localDateToDate(LocalDate.of(1999, 1, 1)), "Pop 6B"));
flagsOnAxis.add(new FlagItem(localDateToDate(LocalDate.of(2012, 1, 1)), "Pop 7B"));

Method localDateToDate is only a helper method calling

Date.from(date.atStartOfDay(ZoneId.systemDefault()).toInstant());

Chart having flags on X-axis

FlagsSeries has an options configuration object too. E.g. we can hide the flags legend and disable tooltip when hovering a flag.

PlotOptionsFlags flagOptions = new PlotOptionsFlags();
flagOptions.setShowInLegend(false);
flagOptions.setEnableMouseTracking(false);
flagsOnAxis.setPlotOptions(flagOptions);

If you want, the flags can be set to follow a series instead of the x-axis. Just call setId on the series you want to track and call flagOptions.setOnSeries with the same id.

To see more samples on how to use Vaadin Charts 3 effectively, head to our demos at https://demo.vaadin.com/charts.

See more tutorials