React ChartsError Bars
react logo
Enterprise

Error Bars visually represent the variability or uncertainty of data, indicating the range within which data values might fall.

Single Error Bars

This example adds Error Bars to a Bar Series using the errorBar series option:

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.

Error Bars are only supported in Bar, Line and Scatter series.

Double Error Bars

This example adds Double Error Bars to a Line Series using the errorBar series option:

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 is also provided to the series tooltip option to display the x and y axis bounds. The X & Y keys and names are available to the renderer when Error Bars are enabled.

Double Error Bars require the x-axis to be a Number Axis, limiting them to Line and Scatter series.

Customisation

This example shows different Error Bar Cap and Whiskers customisations:

errorBar: {
    // ...
    stroke: 'pink', // Whisker stroke colour
    strokeWidth: 2, // Whisker stroke width
    cap: {
        stroke: 'red', // Cap stroke colour (otherwise inherits from whisker)
        strokeWidth: 4, // 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.

The default Cap length is determined based on the type of series:

Formatters can also be used for customisation using errorBar.formatter or errorBar.cap.formatter properties. The params object includes properties from the Series and Error Bars.

API Reference