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.
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
Properties available on the AgErrorBarOptions interface.
Human-readable description of the lower bound error value for the x axis. This is the value to use in tooltips or labels.
Human-readable description of the upper bound error value for the x axis. This is the value to use in tooltips or labels.
Human-readable description of the lower bound error value for the y axis. This is the value to use in tooltips or labels.
Human-readable description of the upper bound error value for the y axis. This is the value to use in tooltips or labels.
Function used to return formatting for individual error bars, based on the given parameters. If the current error bar is highlighted, the highlighted property will be set to true; make sure to check this if you want to differentiate between the highlighted and un-highlighted states.