---
title: "Error Bars"
enterprise: true
framework: react
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

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  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 ChartExample = () => {
  const [options, setOptions] = useState<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",
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

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

## Double Error Bars

#### Double Error Bars

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  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 ChartExample = () => {
  const [options, setOptions] = useState<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 (£)",
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

## Customisation

#### Customisation

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  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 ChartExample = () => {
  const [options, setOptions] = useState<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,
          },
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

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