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

# <a id="charts.charttypes.columnbar"></a>Column & Bar Charts

Column and bar charts illustrate values as vertical or horizontal bars, respectively. The two chart types are essentially equivalent, as if the orientation of the axes was inverted.

Multiple data series, that is, two-dimensional data, are shown with thinner bars or columns grouped by their category, as described in ["Displaying Multiple Series"](https://vaadin.com/docs/next/components/charts/basic-use.md#charts.basic-use.two-dimensional). Enabling stacking with `setStacking()` in plot options stacks the columns or bars of different series on top of each other.

You can also have `COLUMNRANGE` charts that illustrate a range between a lower and an upper value, as described in [Area & Column Range Charts](https://vaadin.com/docs/next/components/charts/charttypes/area-and-column-range.md#charts.charttypes.rangecharts). They require the use of `RangeSeries` to define the lower and upper values.

Table 1. Column & Bar Chart Subtypes

| ChartType     | Plot Options Class       |
| ------------- | ------------------------ |
| `COLUMN`      | `PlotOptionsColumn`      |
| `COLUMNRANGE` | `PlotOptionsColumnRange` |
| `BAR`         | `PlotOptionsBar`         |

See the API documentation for details of the plot options.

## <a id="column-example"></a>Column Example

**Flow** — `ChartTypeColumn.java`

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

Configuration configuration = chart.getConfiguration();
configuration.setTitle("Monthly Average Rainfall");
configuration.setSubTitle("Source: WorldClimate.com");

configuration.addSeries(new ListSeries("Tokyo", 49.9, 71.5, 106.4,
        129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4));
configuration.addSeries(new ListSeries("New York", 83.6, 78.8, 98.5,
        93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3));
configuration.addSeries(new ListSeries("London", 48.9, 38.8, 39.3, 41.4,
        47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2));
configuration.addSeries(new ListSeries("Berlin", 42.4, 33.2, 34.5, 39.7,
        52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1));

XAxis x = new XAxis();
x.setCrosshair(new Crosshair());
x.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
        "Sep", "Oct", "Nov", "Dec");
configuration.addxAxis(x);

YAxis y = new YAxis();
y.setMin(0);
y.setTitle("Rainfall (mm)");
configuration.addyAxis(y);

Tooltip tooltip = new Tooltip();
tooltip.setShared(true);
configuration.setTooltip(tooltip);
```

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

## <a id="bar-example"></a>Bar Example

**Flow** — `ChartTypeBar.java`

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

Configuration configuration = chart.getConfiguration();
configuration.setTitle("Historic World Population by Region");
configuration.setSubTitle(
        "Source: <a href=\"https://en.wikipedia.org/wiki/World_population\">Wikipedia.org</a>");

configuration
        .addSeries(new ListSeries("Year 1800", 107, 31, 635, 203, 2));
configuration
        .addSeries(new ListSeries("Year 1900", 133, 156, 947, 408, 6));
configuration.addSeries(
        new ListSeries("Year 2000", 814, 841, 3714, 727, 31));
configuration.addSeries(
        new ListSeries("Year 2016", 1216, 1001, 4436, 738, 40));

XAxis x = new XAxis();
x.setCategories("Africa", "America", "Asia", "Europe", "Oceania");
configuration.addxAxis(x);

YAxis y = new YAxis();
y.setMin(0);
AxisTitle yTitle = new AxisTitle();
yTitle.setText("Population (millions)");
yTitle.setAlign(VerticalAlign.HIGH);
y.setTitle(yTitle);
configuration.addyAxis(y);

Tooltip tooltip = new Tooltip();
tooltip.setValueSuffix(" millions");
configuration.setTooltip(tooltip);

PlotOptionsBar plotOptions = new PlotOptionsBar();
DataLabels dataLabels = new DataLabels();
dataLabels.setEnabled(true);
plotOptions.setDataLabels(dataLabels);
configuration.setPlotOptions(plotOptions);
```