> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# ErrorBar

ErrorBar renders whiskers to represent error margins on a chart.

## Usage

```tsx theme={null}
import { LineChart, Line, ErrorBar } from 'recharts';

const data = [
  { x: 1, y: 100, error: 10 },
  { x: 2, y: 200, error: 15 },
];

<LineChart data={data}>
  <Line dataKey="y">
    <ErrorBar dataKey="error" />
  </Line>
</LineChart>
```

## Props

<ParamField path="dataKey" type="string | number | function" required>
  Decides how to extract the value of this ErrorBar from the data:

  * `string`: the name of the field in the data object
  * `number`: the index of the field in the data
  * `function`: a function that receives the data object and returns the value of this ErrorBar

  The error values can be a single value for symmetric error bars;
  or an array of a lower and upper error value for asymmetric error bars.
</ParamField>

<ParamField path="width" type="number" default="5">
  Width of the error bar ends (the serifs) in pixels.
  This is not the total width of the error bar, but just the width of the little lines at the ends.

  The total width of the error bar is determined by the data value plus/minus the error value.
</ParamField>

<ParamField path="direction" type="'x' | 'y'">
  Direction of the error bar. Usually determined by chart layout, except in Scatter chart.
  In Scatter chart, "x" means horizontal error bars, "y" means vertical error bars.
</ParamField>

<ParamField path="stroke" type="string" default="black">
  The stroke color. If "none", no line will be drawn.
</ParamField>

<ParamField path="strokeWidth" type="number | string" default="1.5">
  The width of the stroke.
</ParamField>

### Animation props

<ParamField path="isAnimationActive" type="boolean" default="true">
  Whether to animate the error bars.
</ParamField>

<ParamField path="animationBegin" type="number" default="0">
  Specifies when the animation should begin, the unit of this option is ms.
</ParamField>

<ParamField path="animationDuration" type="number" default="400">
  Specifies the duration of animation, the unit of this option is ms.
</ParamField>

<ParamField path="animationEasing" type="AnimationTiming" default="ease-in-out">
  The type of easing function.
</ParamField>

<ParamField path="zIndex" type="number" default="400">
  Z-Index of this component.
</ParamField>

## Error data format

ErrorBar expects data in one of the following forms:

### Symmetric error bars

A single error value representing both lower and upper bounds.

```tsx theme={null}
const data = [
  { x: 1, y: 100, error: 10 },  // Error bar from 90 to 110
  { x: 2, y: 200, error: 15 },  // Error bar from 185 to 215
];

<Line dataKey="y">
  <ErrorBar dataKey="error" />
</Line>
```

### Asymmetric error bars

An array of two values representing lower and upper bounds separately.
First value is the lower bound, second value is the upper bound.

```tsx theme={null}
const data = [
  { x: 1, y: 100, error: [5, 15] },  // Error bar from 95 to 115
  { x: 2, y: 200, error: [10, 20] }, // Error bar from 190 to 220
];

<Line dataKey="y">
  <ErrorBar dataKey="error" />
</Line>
```

The values provided are relative to the main data value.
For example, if the main data value is 10 and the error value is 2,
the error bar will extend from 8 to 12 for symmetric error bars.

In other words, what ErrorBar will render is:

* For symmetric error bars: `[value - errorVal, value + errorVal]`
* For asymmetric error bars: `[value - errorVal[0], value + errorVal[1]]`

## Usage with different chart types

ErrorBar must be a child of a graphical element.

### With Line

```tsx theme={null}
<Line dataKey="y">
  <ErrorBar dataKey="error" />
</Line>
```

### With Bar

```tsx theme={null}
<Bar dataKey="y">
  <ErrorBar dataKey="error" />
</Bar>
```

### With Scatter

In Scatter charts, you can have error bars in both directions:

```tsx theme={null}
<Scatter dataKey="value">
  <ErrorBar dataKey="xError" direction="x" />
  <ErrorBar dataKey="yError" direction="y" />
</Scatter>
```

## Notes

In stacked or ranged Bar charts, ErrorBar will use the higher data value
as the reference point for calculating the error bar positions.

## Source

`https://github.com/recharts/recharts/blob/main/src/cartesian/ErrorBar.tsx`