Configuring Vaadin Charts 3 flags series with Web Components API
In this brief tutorial, I'll show you how to use the Flags series in Vaadin Charts 3. As a basis I'll use a chart created in a previous tutorial available here.
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 data-series to a chart and add points 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.
<data-series type="flags" name="Population Milestones" shape="flag"> <color>#ffc13f</color> <data> <point> <x>1974</x> <chart-title>Pop 4B</chart-title> </point> <point> <x>1987</x> <chart-title>Pop 5B</chart-title> </point> <point> <x>1999</x> <chart-title>Pop 6B</chart-title> </point> <point> <x>2012</x> <chart-title>Pop 7B</chart-title> </point> </data> </data-series>
Let's hide the flags legend and disable tooltip when hovering a flag.
<data-series type="flags" name="Population Milestones" shape="flag" show-in-legend="false" enable-mouse-tracking="false">
If you want, the flags can be set to follow a series instead of the x-axis. Just set id on the series you want to track and set draw-on-series with the same id on the flags series.
To see more samples on how to use Vaadin Charts 3 effectively, head to our demos at https://demo.vaadin.com/vaadin-charts.