---
title: "Error Bars"
enterprise: true
framework: javascript
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
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: {
    text: "Monthly Dividends with 95% Confidence Intervals (%)",
  },
  series: [
    {
      type: "bar",
      xKey: "month",
      yKey: "dividends",
      yName: "Monthly Dividends (%)",
      errorBar: {
        yLowerKey: "lowerCI",
        yUpperKey: "upperCI",
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

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

This example adds Error Bars to a [Bar Series](https://www.ag-grid.com/charts/javascript/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/javascript/bar-series/), [Line](https://www.ag-grid.com/charts/javascript/line-series/) and [Scatter](https://www.ag-grid.com/charts/javascript/scatter-series/) series.

## Double Error Bars

#### Double Error Bars

```ts
import {
  AgChartOptions,
  AgCharts,
  AgLineSeriesTooltipRendererParams,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { DataType, getData } from "./data";

function customTooltipRenderer({
  datum,
}: AgLineSeriesTooltipRendererParams<DataType>) {
  return {
    heading: "",
    data: [
      {
        label: "Expiry",
        value: `${datum.expiryLo} to ${datum.expiryHi} months`,
      },
      { label: "Price", value: `${datum.priceLo} to ${datum.priceHi} pounds` },
    ],
  };
}
ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions<DataType> = {
  data: getData(),
  title: {
    text: "Option Prices vs. Expiry with Confidence Intervals",
  },
  series: [
    {
      type: "line",
      xKey: "expiry",
      yKey: "price",
      errorBar: {
        xLowerKey: "expiryLo",
        xUpperKey: "expiryHi",
        yLowerKey: "priceLo",
        yUpperKey: "priceHi",
      },
      tooltip: { renderer: customTooltipRenderer },
    },
  ],
  axes: {
    x: {
      type: "number",
      title: {
        text: "Expiry Date (Months)",
      },
    },
    y: {
      type: "number",
      title: {
        text: "Option Price (£)",
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Double Error Bars](https://www.ag-grid.com/charts/typescript/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/javascript/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/javascript/axes-types/#number), limiting them to [Line](https://www.ag-grid.com/charts/javascript/line-series/) and [Scatter](https://www.ag-grid.com/charts/javascript/scatter-series/) series.

## Customisation

#### Customisation

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  ScatterSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  NumberAxisModule,
  ScatterSeriesModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: {
    text: "Volume-Pressure Relationship with Confidence Intervals",
  },
  series: [
    {
      type: "scatter",
      xKey: "vol",
      yKey: "pres",
      errorBar: {
        xLowerKey: "volLower",
        xUpperKey: "volUpper",
        yLowerKey: "presLower",
        yUpperKey: "presUpper",
        stroke: "pink",
        strokeWidth: 2,
        cap: {
          stroke: "red", // otherwise inherits `pink` from whisker
          strokeWidth: 5, // otherwise inherits `2` from whisker
          length: 25,
        },
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Customisation](https://www.ag-grid.com/charts/typescript/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/javascript/line-series/) and [Scatter](https://www.ag-grid.com/charts/javascript/scatter-series/) series, it defaults to the [Marker](https://www.ag-grid.com/charts/javascript/markers/) size.
> - For [Bar](https://www.ag-grid.com/charts/javascript/bar-series/#simple-bar) series, it defaults to 30% of the bar width.

[Stylers](https://www.ag-grid.com/charts/javascript/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. |