---
title: "Error Bars"
enterprise: true
framework: angular
version: "14.1.0"
---

# Error Bars

Error Bars visually represent the variability or uncertainty of data, indicating the range within which data values might fall.

## Single Error Bars

#### Single Error Bars

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Single Error Bars](https://www.ag-grid.com/charts/angular/error-bars/examples/single-error-bars)

This example adds Error Bars to a [Bar Series](https://www.ag-grid.com/charts/angular/bar-series/) using the `errorBar` series option:

```js
{
    series: [
        {
            type: 'bar',
            xKey: 'month',
            yKey: 'dividends',
            errorBar: {
                yLowerKey: 'lowerCI',
                yUpperKey: 'upperCI',
            },
        },
    ],
}
```

In this configuration:

- `errorBar.yLowerKey` maps to the lower bound of the confidence interval.
- `errorBar.yUpperKey` maps to the upper bound of the confidence interval.

> **Note**
>
> Error Bars are only supported in [Bar](https://www.ag-grid.com/charts/angular/bar-series/), [Line](https://www.ag-grid.com/charts/angular/line-series/) and [Scatter](https://www.ag-grid.com/charts/angular/scatter-series/) series.

## Double Error Bars

#### Double Error Bars

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Double Error Bars](https://www.ag-grid.com/charts/angular/error-bars/examples/double-error-bars)

This example adds Double Error Bars to a Line Series using the `errorBar` series option:

```js
{
    series: [
        {
            type: 'line',
            xKey: 'expiry',
            yKey: 'price',
            errorBar: {
                xLowerKey: 'expiryLo',
                xUpperKey: 'expiryHi',
                yLowerKey: 'priceLo',
                yUpperKey: 'priceHi',
            },
            tooltip: { renderer: customTooltipRenderer },
        },
    ],
}
```

In this configuration:

- `errorBar.xLowerKey` and `errorBar.xUpperKey` denote the x-axis bounds.
- `errorBar.yLowerKey` and `errorBar.yUpperKey` denote the y-axis bounds.

A custom [Tooltip](https://www.ag-grid.com/charts/angular/tooltips/) is also provided to the series `tooltip` option to display the x-axis and y-axis bounds. The x and y keys and names are available to the renderer when Error Bars are enabled.

> **Note**
>
> Double Error Bars require the x-axis to be a [Number Axis](https://www.ag-grid.com/charts/angular/axes-types/#number), limiting them to [Line](https://www.ag-grid.com/charts/angular/line-series/) and [Scatter](https://www.ag-grid.com/charts/angular/scatter-series/) series.

## Customisation

#### Customisation

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Customisation](https://www.ag-grid.com/charts/angular/error-bars/examples/customisation)

This example shows different Error Bar Cap and Whiskers customisations:

```js
{
    errorBar: {
        // ...
        stroke: 'pink', // Whisker stroke colour
        strokeWidth: 2, // Whisker stroke width
        cap: {
            stroke: 'red', // Cap stroke colour (otherwise inherits from whisker)
            strokeWidth: 5, // Cap stroke width (otherwise inherits from whisker)
            length: 25, // Cap length as an absolute width
        },
    },
}
```

The Cap length can also be customised as a ratio relative to series shape using `lengthRatio`.

> **Note**
>
> The default Cap length is determined based on the type of series:
>
> - For [Line](https://www.ag-grid.com/charts/angular/line-series/) and [Scatter](https://www.ag-grid.com/charts/angular/scatter-series/) series, it defaults to the [Marker](https://www.ag-grid.com/charts/angular/markers/) size.
> - For [Bar](https://www.ag-grid.com/charts/angular/bar-series/#simple-bar) series, it defaults to 30% of the bar width.

[Stylers](https://www.ag-grid.com/charts/angular/stylers/) can also be used for customisation using the `errorBar.itemStyler` property. The `params` object includes properties from the Series and Error Bars.

## API Reference

#### Error Bar Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| xLowerKey | DatumKey |  | The key to use to retrieve lower bound error values from the x-axis data. |
| xUpperKey | DatumKey |  | The key to use to retrieve upper bound error values from the x-axis data. |
| yLowerKey | DatumKey |  | The key to use to retrieve lower bound error values from the y-axis data. |
| yUpperKey | DatumKey |  | The key to use to retrieve upper bound error values from the y-axis data. |
| xLowerName | string |  | Human-readable description of the lower bound error value for the x-axis. This is the value to use in tooltips or labels. |
| xUpperName | string |  | Human-readable description of the upper bound error value for the x-axis. This is the value to use in tooltips or labels. |
| yLowerName | string |  | Human-readable description of the lower bound error value for the y-axis. This is the value to use in tooltips or labels. |
| yUpperName | string |  | Human-readable description of the upper bound error value for the y-axis. This is the value to use in tooltips or labels. |
| itemStyler | Styler |  | Function used to return formatting for individual error bars, based on the given parameters. |
| cap | ErrorBarCapOptions |  | Options to style error bars' caps |
| cap.length | PixelSize |  | Absolute length of caps in pixels. |
| cap.lengthRatio | Ratio |  | Length of caps relative to the shape used by the series. |
| cap.visible | boolean |  | Whether to display the error bars. |
| cap.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| cap.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| cap.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| cap.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| cap.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| visible | boolean |  | Whether to display the error bars. |
| stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |