> Markdown version of [Area & Column Range](https://vaadin.com/docs/next/components/charts/charttypes/area-and-column-range). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.rangecharts"></a>Area & Column Range Charts

Ranged charts display an area or column between a minimum and maximum value, instead of a single data point. They require the use of `RangeSeries`, as described in ["Range Series"](https://vaadin.com/docs/next/components/charts/data.md#charts.data.rangeseries). An area range is created with the `AREARANGE` chart type, and a column range with the `COLUMNRANGE` chart type.

Consider the following example:

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

// Modify the default configuration a bit
Configuration conf = chart.getConfiguration();
conf.setTitle("Extreme Temperature Range in Finland");
...

// Create the range series
// Source: https://ilmatieteenlaitos.fi/lampotilaennatyksia
RangeSeries series = new RangeSeries("Temperature Extremes",
    new Double[]{-51.5,10.9},
    new Double[]{-49.0,11.8},
    ...
    new Double[]{-47.0,10.8});//
conf.addSeries(series);
```

The resulting chart, and the same chart with a column range, are shown in [Area and Column Range Chart](#figure.charts.charttypes.rangecharts).

[Image: charts arearange]

Area and Column Range Chart

## <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="column-range-example"></a>Column Range Example

**Flow** — `ChartTypeColumnRange.java`

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

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);
```