> Markdown version of [Error Bars](https://vaadin.com/docs/next/components/charts/charttypes/error-bars). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.errorbar"></a>Error Bars

Error bars visualize errors, or high and low values, in statistical data. They typically represent high and low values in data, or a standard deviation, a percentile, or a quantile. The high and low values are represented as horizontal lines, or "whiskers", connected by a vertical stem.

Although error bars are technically a chart type (`ChartType.ERRORBAR`), you normally use them together with some primary chart type, such as a scatter or column chart.

[Image: charts errorbar]

Error Bars in a Scatter Chart

To display the error bars for data points, you need to have a separate data series for the low and high values. The data series needs to use the `PlotOptionsErrorBar` plot options type.

```java
// Create a chart of some primary type
Chart chart = new Chart(ChartType.SCATTER);

// Modify the default configuration a bit
Configuration conf = chart.getConfiguration();
conf.setTitle("Average Temperatures in Turku");
conf.getLegend().setEnabled(false);

// The primary data series
ListSeries averages = new ListSeries(
    -6, -6.5, -4, 3, 9, 14, 17, 16, 11, 6, 2, -2.5);

// Error bar data series with low and high values
DataSeries errors = new DataSeries();
errors.add(new DataSeriesItem(0,  -9, -3));
errors.add(new DataSeriesItem(1, -10, -3));
errors.add(new DataSeriesItem(2,  -8,  1));
...

// Need to be used for series to be recognized as error bar
PlotOptionsErrorbar barOptions = new PlotOptionsErrorbar();
errors.setPlotOptions(barOptions);

// The errors should be drawn lower
conf.addSeries(errors);
conf.addSeries(averages);
```

You should add the error bar series first, to have it rendered lower in the chart.

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

Plot options for error bar charts have type `PlotOptionsErrorBar`. See the API documentation for details of the plot options.

> **Note:** Although most [visual styles are defined in CSS](https://vaadin.com/docs/next/components/charts/styling.md#css.styling), some options, such as `whiskerLength`, are set through the Java API.

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

**Flow** — `ChartTypeErrorBar.java`

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

Configuration configuration = chart.getConfiguration();
configuration.setTitle("Monthly Rainfall");

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

YAxis y = new YAxis();
Labels yLabels = new Labels();
yLabels.setFormat("{value} mm");
y.setLabels(yLabels);
y.setTitle("Rainfall");
configuration.addyAxis(y);

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

Series rainfall = new ListSeries("Rainfall", 49.9, 71.5, 106.4, 129.2,
        144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4);
PlotOptionsColumn rainfallOptions = new PlotOptionsColumn();
SeriesTooltip rainfallTooltip = new SeriesTooltip();
rainfallTooltip.setPointFormat(
        "<span style=\"font-weight: bold; color: {series.color}\">"
                + "{series.name}</span>: <b>{point.y:.1f} mm</b> ");
rainfallOptions.setTooltip(rainfallTooltip);
rainfall.setPlotOptions(rainfallOptions);
configuration.addSeries(rainfall);

Series error = new RangeSeries("Rainfall error",
        new Number[] { 48, 51 }, new Number[] { 68, 73 },
        new Number[] { 92, 110 }, new Number[] { 128, 136 },
        new Number[] { 140, 150 }, new Number[] { 171, 179 },
        new Number[] { 135, 143 }, new Number[] { 142, 149 },
        new Number[] { 204, 220 }, new Number[] { 189, 199 },
        new Number[] { 95, 110 }, new Number[] { 52, 56 });
PlotOptionsErrorbar errorOptions = new PlotOptionsErrorbar();
SeriesTooltip errorTooltip = new SeriesTooltip();
errorTooltip.setPointFormat(
        "(error range: {point.low}-{point.high} mm)<br/>");
errorOptions.setTooltip(errorTooltip);
error.setPlotOptions(errorOptions);
configuration.addSeries(error);
```