JavaScript ChartsError Bars

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

Single Error Bars Copy Link

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.

Double Error Bars Copy Link

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-axis and y-axis bounds. The x and y keys and names are available to the renderer when Error Bars are enabled.

Customisation Copy Link

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: 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.

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 Copy Link