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.yLowerKeymaps to the lower bound of the confidence interval.errorBar.yUpperKeymaps to the upper bound of the confidence interval.
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.xLowerKeyanderrorBar.xUpperKeydenote the x-axis bounds.errorBar.yLowerKeyanderrorBar.yUpperKeydenote 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:
- For Line and Scatter series, it defaults to the Marker size.
- For Vertical Bar series, it defaults to 30% of the bar width.
- For Horizontal Bar series, it defaults to half of the bar height.
Stylers can also be used for customisation using the errorBar.itemStyler property. The params object includes properties from the Series and Error Bars.