> Markdown version of [Flags](https://vaadin.com/docs/next/components/charts/charttypes/flags). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.flags"></a>Flags

*Flags* is a special chart type for annotating a series or the X axis with call-out labels. Flags denote interesting points or events on the series or axis. The flags are defined as items in a data series separate from the annotated series or axis.

[Image: charts flags]

Flags Placed on an Axis and a Series

Flags are normally used in a chart that has one or more normal data series.

## <a id="charts.charttypes.flags.plotoptions"></a>Plot Options

Flags are defined in a series that has its chart type specified by setting its plot options as `PlotOptionsFlags`. In addition to the common plot options properties, flag charts also have the following properties:

- `shape`

  defines the shape of the marker. This can be one of `FLAG`, `CIRCLEPIN`, `SQUAREPIN`, or `CALLOUT`.

- `stackDistance`

  defines the vertical offset between flags on the same value in the same series. Defaults to 12.

- `onSeries`

  defines the ID of the series that the flags should be drawn on. If no ID is given, the flags are drawn on the X axis.

- `onKey`

  in chart types that have multiple keys (Y values) for a data point, the property defines on which key the flag is placed. Line and column series have only one key, `y`. In range, Open-High-Low-Close (OHLC), and candlestick series, the flag can be placed on the `open`, `high`, `low`, or `close` key. Defaults to `y`.

## <a id="charts.charttypes.flags.data"></a>Data

The data for flag series require `x` and `title` properties, but can also have a `text` property indicating the tooltip text. The easiest way to set these properties is to use `FlagItem`.

## <a id="charts.charttypes.flags.example"></a>Example

The following annotates a time series as well as the axis with flags:

```java
Chart chart = new Chart(ChartType.SPLINE);

Configuration configuration = chart.getConfiguration();
configuration.getTitle().setText("USD to EUR exchange rate");
configuration.getxAxis().setType(AxisType.DATETIME);

// A data series to annotate with flags
DataSeries dataSeries = new DataSeries();
dataSeries.setId("dataseries");
dataSeries.addData(new Number[][] { { 1434499200000l, 0.8821 },
        { 1434585600000l, 0.8802 }, { 1434672000000l, 0.8808 },
        { 1434844800000l, 0.8794 }, { 1434931200000l, 0.8818 },
        { 1435017600000l, 0.8952 }, { 1435104000000l, 0.8924 },
        { 1435190400000l, 0.8925 }, { 1435276800000l, 0.8955 } });

// Flags on the data series
DataSeries flagsOnSeries = new DataSeries();
flagsOnSeries.setName("Flags on series");
PlotOptionsFlags plotOptionsFlags = new PlotOptionsFlags();
plotOptionsFlags.setShape(FlagShape.SQUAREPIN);
plotOptionsFlags.setOnSeries("dataseries");
flagsOnSeries.setPlotOptions(plotOptionsFlags);
flagsOnSeries.add(new FlagItem(1434585600000l, "First Series Flag",
        "First Series Flag Tooltip Text"));
flagsOnSeries.add(new FlagItem(1435017600000l, "Second Series Flag"));

// Flags on the X axis
DataSeries flagsOnAxis = new DataSeries();
flagsOnAxis.setPlotOptions(new PlotOptionsFlags());
flagsOnAxis.setName("Flags on axis");
flagsOnAxis.add(new FlagItem(1434844800000l, "First Axis Flag",
        "First Axis Flag Tooltip Text"));
flagsOnAxis.add(new FlagItem(1435190400000l, "Second Axis Flag"));

configuration.setSeries(dataSeries, flagsOnSeries, flagsOnAxis);
```

## <a id="flags-example"></a>Flags Example

**Flow** — `ChartTypeFlags.java`

```java
Chart chart = new Chart(ChartType.SPLINE);

Configuration configuration = chart.getConfiguration();
configuration.setTitle("Average fruit consumption during one week");

XAxis xAxis = new XAxis();
xAxis.setCategories("Monday", "Tuesday", "Wednesday", "Thursday",
        "Friday", "Saturday", "Sunday");
configuration.addxAxis(xAxis);

YAxis yAxis = new YAxis();
yAxis.setTitle("Fruit units");
configuration.addyAxis(yAxis);

Tooltip tooltip = new Tooltip();
tooltip.setShared(true);
tooltip.setValueSuffix(" units");
configuration.setTooltip(tooltip);

configuration.addSeries(new ListSeries("John", 3, 4, 3, 5, 4, 10, 12));

ListSeries janeSeries = new ListSeries("Jane", 1, 3, 4, 3, 3, 5, 4);
janeSeries.setId("jane");
configuration.addSeries(janeSeries);

DataSeries onSeriesFlags = new DataSeries("On series");
PlotOptionsFlags onSeriesFlagsOptions = new PlotOptionsFlags();
onSeriesFlagsOptions.setOnSeries("jane");
onSeriesFlagsOptions.setShape(FlagShape.SQUAREPIN);
onSeriesFlags.setPlotOptions(onSeriesFlagsOptions);
onSeriesFlags.add(new FlagItem(2, "On series"));
onSeriesFlags.add(new FlagItem(5, "On series"));
configuration.addSeries(onSeriesFlags);

DataSeries onAxisFlags = new DataSeries("On axis");
onAxisFlags.setPlotOptions(new PlotOptionsFlags());
onAxisFlags.add(new FlagItem(3, "On axis"));
configuration.addSeries(onAxisFlags);
```