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

# <a id="charts.charttypes.area"></a>Area Charts

Area charts are like line charts, except that they fill the area between the line and some threshold value on the Y axis. The threshold depends on the chart type. Chart type combinations for spline interpolation and ranges are supported on top of the base type.

Table 1. Area Chart Subtypes

| ChartType         | Plot Options Class           |
| ----------------- | ---------------------------- |
| `AREA`            | `PlotOptionsArea`            |
| `AREASPLINE`      | `PlotOptionsAreaSpline`      |
| `AREARANGE`       | `PlotOptionsAreaRange`       |
| `AREASPLINERANGE` | `PlotOptionsAreaSplineRange` |

In area range charts, the area between a lower and upper value is painted with a transparent color. The data series must specify the minimum and maximum values for the Y coordinates, defined either with `RangeSeries`, as described in ["RangeSeries"](https://vaadin.com/docs/next/components/charts/data.md#charts.data.rangeseries), or with `DataSeries`, described in ["Generic Data Series"](https://vaadin.com/docs/next/components/charts/data.md#charts.data.dataseries).

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

Area charts support *stacking*, so that multiple series are piled on top of each other. You enable stacking from the plot options with `setStacking()`. The `Stacking.NORMAL` stacking mode does a normal summative stacking, whereas `Stacking.PERCENT` handles them as proportions.

See [Data Point Markers](https://vaadin.com/docs/next/components/charts/charttypes/markers.md#charts.charttypes.markers) for plot options for markers.

## <a id="area-example"></a>Area Example

**Flow** — `ChartTypeArea.java`

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

final Configuration configuration = chart.getConfiguration();

configuration.setTitle(
        "Historic and Estimated Worldwide Population Growth by Region");
configuration.setSubTitle("Source: Wikipedia.org");

XAxis xAxis = configuration.getxAxis();
xAxis.setCategories("1750", "1800", "1850", "1900", "1950", "1999",
        "2050");
xAxis.setTickmarkPlacement(TickmarkPlacement.ON);

YAxis yAxis = configuration.getyAxis();
yAxis.setTitle("Billions");
yAxis.getLabels()
        .setFormatter("function () { return this.value / 1000;}");

configuration.getTooltip().setValueSuffix(" millions");

PlotOptionsArea plotOptionsArea = new PlotOptionsArea();
plotOptionsArea.setStacking(Stacking.NORMAL);
configuration.setPlotOptions(plotOptionsArea);

configuration.addSeries(
        new ListSeries("Asia", 502, 635, 809, 947, 1402, 3634, 5268));
configuration.addSeries(
        new ListSeries("Africa", 106, 107, 111, 133, 221, 767, 1766));
configuration.addSeries(
        new ListSeries("Europe", 163, 203, 276, 408, 547, 729, 628));
configuration.addSeries(
        new ListSeries("America", 18, 31, 54, 156, 339, 818, 1201));
configuration
        .addSeries(new ListSeries("Oceania", 2, 2, 2, 6, 13, 30, 46));
```

## <a id="area-spline-example"></a>Area Spline Example

**Flow** — `ChartTypeAreaSpline.java`

```java
Chart chart = new Chart(ChartType.AREASPLINE);
Configuration conf = chart.getConfiguration();

conf.setTitle(new Title("Average fruit consumption during one week"));

Legend legend = new Legend();
legend.setLayout(LayoutDirection.VERTICAL);
legend.setAlign(HorizontalAlign.LEFT);
legend.setFloating(true);
legend.setVerticalAlign(VerticalAlign.TOP);
legend.setX(150);
legend.setY(100);
conf.setLegend(legend);

XAxis xAxis = new XAxis();
xAxis.setCategories(new String[] { "Monday", "Tuesday", "Wednesday",
        "Thursday", "Friday", "Saturday", "Sunday" });
PlotBand plotBand = new PlotBand(4.5, 6.5,
        new SolidColor(0, 0, 0, 0.05));
plotBand.setZIndex(1);
xAxis.setPlotBands(plotBand);
conf.addxAxis(xAxis);

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

Tooltip tooltip = new Tooltip();
// Customize tooltip formatting
tooltip.setShared(true);
tooltip.setValueSuffix(" units");
conf.setTooltip(tooltip);

PlotOptionsArea plotOptions = new PlotOptionsArea();
conf.setPlotOptions(plotOptions);

ListSeries o = new ListSeries("John", 3, 4, 3, 5, 4, 10);
// You can also add values separately
o.addData(12);
conf.addSeries(o);
conf.addSeries(new ListSeries("Jane", 1, 3, 4, 3, 3, 5, 4));
```

## <a id="area-range-example"></a>Area Range Example

**Flow** — `ChartTypeAreaRange.java`

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

Configuration conf = chart.getConfiguration();

conf.setTitle("Temperature variation by day");

conf.getxAxis().setType(AxisType.DATETIME);
conf.getxAxis().setCrosshair(new Crosshair());

Tooltip tooltip = new Tooltip();
tooltip.setShared(true);
tooltip.setValueSuffix("°C");
conf.setTooltip(tooltip);

RangeSeries data = new RangeSeries("Temperatures", getRawData());

conf.setSeries(data);

chart.setTimeline(true);
```

## <a id="area-spline-range-example"></a>Area Spline Range Example

**Flow** — `ChartTypeAreaSplineRange.java`

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

Configuration configuration = chart.getConfiguration();
configuration.getTitle().setText("Temperature variation by day");

Tooltip tooltip = configuration.getTooltip();
tooltip.setValueSuffix("°C");

DataSeries dataSeries = new DataSeries("Temperatures");
for (Number[] data : getRawData()) {
    dataSeries.add(new DataSeriesItem(data[0], data[1], data[2]));
}
configuration.setSeries(dataSeries);

chart.setTimeline(true);
```