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.

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 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>
 

Flags set on chart X axis

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.

See more tutorials