ErrorBar

ErrorBar renders whiskers to represent error margins on a chart.

Usage

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

dataKey · 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.

width · 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.

direction · '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.

stroke · string · default: "black"

The stroke color. If “none”, no line will be drawn.

strokeWidth · number | string · default: "1.5"

The width of the stroke.

Animation props

isAnimationActive · boolean · default: "true"

Whether to animate the error bars.

animationBegin · number · default: "0"

Specifies when the animation should begin, the unit of this option is ms.

animationDuration · number · default: "400"

Specifies the duration of animation, the unit of this option is ms.

animationEasing · AnimationTiming · default: "ease-in-out"

The type of easing function.

zIndex · number · default: "400"

Z-Index of this component.

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.

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.

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

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

With Bar

<Bar dataKey="y">
  <ErrorBar dataKey="error" />
</Bar>

With Scatter

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

<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