API

Charts

General Components

Cartesian Components

Polar Components

Shapes

ErrorBar

ErrorBar renders whiskers to represent error margins on a chart.

It must be a child of a graphical element.

ErrorBar expects data in one of the following forms:

  • Symmetric error bars: a single error value representing both lower and upper bounds.
  • 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.

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]]

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

Related Links

Parent Components

ErrorBar consumes context provided by these components:

Props

  • dataKeyFunction | number | string

    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.

    Examples:

  • animationBeginnumberoptional

    DEFAULT: 0

  • animationDurationnumberoptional

    DEFAULT: 400

  • animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear"optional

    DEFAULT: "ease-in-out"

  • directionnumber | stringoptional

    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.

  • isAnimationActivebooleanoptional

    DEFAULT: true

  • strokestringoptional

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

    DEFAULT: "black"

  • strokeWidthnumber | stringoptional

    The width of the stroke

    DEFAULT: 1.5

  • widthnumber | stringoptional

    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.

    DEFAULT: 5

    Examples:

  • zIndexnumberoptional

    DEFAULT: 400

    Examples: