JavaScript ChartsError Bars

Version 14.2.0

Enterprise

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

Single Error Bars Copy Link

main.ts

import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: {
    text: "Monthly Dividends with 95% Confidence Intervals (%)",
  },
  series: [
    {
      type: "bar",
      xKey: "month",
      yKey: "dividends",
      yName: "Monthly Dividends (%)",
      errorBar: {
        yLowerKey: "lowerCI",
        yUpperKey: "upperCI",
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

data.ts

export function getData(): any[] {
  return [
    { month: "Jan", dividends: 2.5, lowerCI: 1.5, upperCI: 3.5 },
    { month: "Feb", dividends: 3.0, lowerCI: 2.3, upperCI: 3.7 },
    { month: "Mar", dividends: 2.8, lowerCI: 2.1, upperCI: 3.5 },
    { month: "Apr", dividends: 3.2, lowerCI: 2.4, upperCI: 3.9 },
    { month: "May", dividends: 2.9, lowerCI: 2.2, upperCI: 3.6 },
    { month: "Jun", dividends: 3.1, lowerCI: 2.3, upperCI: 3.9 },
    { month: "Jul", dividends: 2.7, lowerCI: 2.0, upperCI: 3.4 },
    { month: "Aug", dividends: 3.3, lowerCI: 2.5, upperCI: 3.8 },
    { month: "Sep", dividends: 3.0, lowerCI: 2.2, upperCI: 3.8 },
    { month: "Oct", dividends: 2.6, lowerCI: 1.8, upperCI: 3.4 },
    { month: "Nov", dividends: 2.8, lowerCI: 2.0, upperCI: 3.6 },
    { month: "Dec", dividends: 2.9, lowerCI: 2.1, upperCI: 3.7 },
  ];
}

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

main.ts

import {
  AgChartOptions,
  AgCharts,
  AgLineSeriesTooltipRendererParams,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { DataType, getData } from "./data";

function customTooltipRenderer({
  datum,
}: AgLineSeriesTooltipRendererParams<DataType>) {
  return {
    heading: "",
    data: [
      {
        label: "Expiry",
        value: `${datum.expiryLo} to ${datum.expiryHi} months`,
      },
      { label: "Price", value: `${datum.priceLo} to ${datum.priceHi} pounds` },
    ],
  };
}
ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgChartOptions<DataType> = {
  data: getData(),
  title: {
    text: "Option Prices vs. Expiry with Confidence Intervals",
  },
  series: [
    {
      type: "line",
      xKey: "expiry",
      yKey: "price",
      errorBar: {
        xLowerKey: "expiryLo",
        xUpperKey: "expiryHi",
        yLowerKey: "priceLo",
        yUpperKey: "priceHi",
      },
      tooltip: { renderer: customTooltipRenderer },
    },
  ],
  axes: {
    x: {
      type: "number",
      title: {
        text: "Expiry Date (Months)",
      },
    },
    y: {
      type: "number",
      title: {
        text: "Option Price (£)",
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

data.ts

export interface DataType {
  expiry: number;
  price: number;
  expiryLo: number;
  expiryHi: number;
  priceLo: number;
  priceHi: number;
}

export function getData(): DataType[] {
  return [
    {
      expiry: 1,
      price: 15,
      expiryLo: 0.75,
      expiryHi: 1.25,
      priceLo: 12,
      priceHi: 18,
    },
    {
      expiry: 3,
      price: 25,
      expiryLo: 2.5,
      expiryHi: 3.5,
      priceLo: 22,
      priceHi: 28,
    },
    {
      expiry: 6,
      price: 30,
      expiryLo: 5.5,
      expiryHi: 6.5,
      priceLo: 27,
      priceHi: 33,
    },
    {
      expiry: 9,
      price: 32,
      expiryLo: 8.5,
      expiryHi: 9.5,
      priceLo: 29,
      priceHi: 35,
    },
    {
      expiry: 12,
      price: 35,
      expiryLo: 11.5,
      expiryHi: 12.5,
      priceLo: 32,
      priceHi: 38,
    },
    {
      expiry: 18,
      price: 38,
      expiryLo: 17.5,
      expiryHi: 18.5,
      priceLo: 34,
      priceHi: 42,
    },
    {
      expiry: 24,
      price: 40,
      expiryLo: 23,
      expiryHi: 25,
      priceLo: 36,
      priceHi: 44,
    },
    {
      expiry: 30,
      price: 42,
      expiryLo: 29,
      expiryHi: 31,
      priceLo: 38,
      priceHi: 46,
    },
    {
      expiry: 36,
      price: 45,
      expiryLo: 35,
      expiryHi: 37,
      priceLo: 40,
      priceHi: 50,
    },
  ];
}

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.

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

Customisation Copy Link

main.ts

import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  ScatterSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  ErrorBarsModule,
  LegendModule,
  NumberAxisModule,
  ScatterSeriesModule,
  ContextMenuModule,
]);

const options: AgChartOptions = {
  data: getData(),
  title: {
    text: "Volume-Pressure Relationship with Confidence Intervals",
  },
  series: [
    {
      type: "scatter",
      xKey: "vol",
      yKey: "pres",
      errorBar: {
        xLowerKey: "volLower",
        xUpperKey: "volUpper",
        yLowerKey: "presLower",
        yUpperKey: "presUpper",
        stroke: "pink",
        strokeWidth: 2,
        cap: {
          stroke: "red", // otherwise inherits `pink` from whisker
          strokeWidth: 5, // otherwise inherits `2` from whisker
          length: 25,
        },
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

data.ts

export function getData() {
  return [
    {
      vol: 0.5,
      volLower: 0.45,
      volUpper: 0.55,
      pres: 8.9,
      presLower: 8.1,
      presUpper: 9.6,
    },
    {
      vol: 1.0,
      volLower: 0.9,
      volUpper: 1.1,
      pres: 8.1,
      presLower: 7.4,
      presUpper: 8.9,
    },
    {
      vol: 1.5,
      volLower: 1.35,
      volUpper: 1.65,
      pres: 6.8,
      presLower: 6.2,
      presUpper: 7.5,
    },
    {
      vol: 2.0,
      volLower: 1.8,
      volUpper: 2.2,
      pres: 5.5,
      presLower: 5.0,
      presUpper: 5.9,
    },
    {
      vol: 2.5,
      volLower: 2.25,
      volUpper: 2.75,
      pres: 4.2,
      presLower: 3.8,
      presUpper: 4.7,
    },
    {
      vol: 3.0,
      volLower: 2.7,
      volUpper: 3.3,
      pres: 3.1,
      presLower: 2.8,
      presUpper: 3.5,
    },
    {
      vol: 3.5,
      volLower: 3.15,
      volUpper: 3.85,
      pres: 2.0,
      presLower: 1.8,
      presUpper: 2.3,
    },
    {
      vol: 4.0,
      volLower: 3.6,
      volUpper: 4.4,
      pres: 1.2,
      presLower: 1,
      presUpper: 1.6,
    },
  ];
}

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.

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

For Line and Scatter series, it defaults to the Marker size.
For Bar series, it defaults to 30% of the bar width.

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

Properties available on the AgErrorBarOptions interface.

xLowerKey DatumKey: The key to use to retrieve lower bound error values from the x-axis data.
xUpperKey DatumKey: The key to use to retrieve upper bound error values from the x-axis data.
yLowerKey DatumKey: The key to use to retrieve lower bound error values from the y-axis data.
yUpperKey DatumKey: The key to use to retrieve upper bound error values from the y-axis data.
xLowerName string: Human-readable description of the lower bound error value for the x-axis. This is the value to use in tooltips or labels.
xUpperName string: Human-readable description of the upper bound error value for the x-axis. This is the value to use in tooltips or labels.
yLowerName string: Human-readable description of the lower bound error value for the y-axis. This is the value to use in tooltips or labels.
yUpperName string: Human-readable description of the upper bound error value for the y-axis. This is the value to use in tooltips or labels.
itemStyler Styler: Function used to return formatting for individual error bars, based on the given parameters.
cap ErrorBarCapOptions: Options to style error bars' caps
visible boolean: Whether to display the error bars.
stroke AgCssColorOrRef: The colour for the stroke.
strokeWidth PixelSize: The width of the stroke in pixels.
strokeOpacity Opacity: The opacity of the stroke colour.
lineDash PixelSize[]: An array specifying the length in pixels of alternating dashes and gaps.
lineDashOffset PixelSize: The initial offset of the dashed line in pixels.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

JavaScript ChartsError Bars

Single Error Bars Copy Link

Double Error Bars Copy Link

Customisation Copy Link

API Reference Copy Link