SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Error Bars Chart Type
The Error Bars Chart Type

Error Bars can be added to a SciChart.js chart using the FastErrorBarsRenderableSeries type.

The JavaScript Error Bars Chart Example can be found in the SciChart.Js Examples Suite on Github, or our live demo at demo.scichart.com

Above: The JavaScript Error Bars Chart example from the SciChart.js Demo.

Creating Error Bars Series

To create a Javascript Error Bars Chart with SciChart.js, use the following code:

// Demonstrates how to create a chart with error bars using SciChart.js
const {
  SciChartSurface,
  NumericAxis,
  FastErrorBarsRenderableSeries ,
  HlcDataSeries,
  EErrorMode,
  EErrorDirection,
  EDataPointWidthMode,
  SciChartJsNavyTheme
} = SciChart;

// or, for npm, import { SciChartSurface, ... } from "scichart"

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
  theme: new SciChartJsNavyTheme()
});
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];
const yValues = [2.5, 3.5, 3.7, 4.0, 5.0, 5.5, 5.0, 4.0, 3.0];
const highValues = [3.7, 3.8, 4.0, 5.3, 5.9, 5.7, 5.0, 4.3, 3.2];
const lowValues = [2.2, 3.4, 3.3, 3.8, 5.0, 4.8, 3.5, 3.0, 1.8];

const dataSeries = new HlcDataSeries(wasmContext, {
  xValues,
  yValues,
  highValues,
  lowValues
});

const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
  dataSeries,
  stroke: "#50C7E0",
  strokeThickness: 2,
  // Optional parameters. Defaults are Both, Vertical
  errorMode: EErrorMode.Both,
  errorDirection: EErrorDirection.Vertical,
  // More optional parameters. Defaults are 0.5, Relative
  dataPointWidth: 0.5,
  dataPointWidthMode: EDataPointWidthMode.Relative
});

sciChartSurface.renderableSeries.add(errorBarsSeries);
// Demonstrates how to create a chart with error bars in SciChart.js using the Builder API
const {
  chartBuilder,
  ESeriesType,
  EThemeProviderType
} = SciChart;

// or, for npm, import { chartBuilder, ... } from "scichart"

const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
  surface: { theme: { type: EThemeProviderType.Dark } },
  series: [
    {
      type: ESeriesType.ErrorBarsSeries,
      hlcData: {
        xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
        yValues: [2.5, 3.5, 3.7, 4.0, 5.0, 5.5, 5.0, 4.0, 3.0],
        highValues: [3.7, 3.8, 4.0, 5.3, 5.9, 5.7, 5.0, 4.3, 3.2],
        lowValues: [2.2, 3.4, 3.3, 3.8, 5.0, 4.8, 3.5, 3.0, 1.8]
      },
      options: {
        stroke: "#50C7E0",
        strokeThickness: 3,
      }
    }
  ]
});

In the code above:

This results in the following output:

<div id="scichart-root" ></div>
  
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
  
async function simpleErrorBarsChart(divElementId) {
  // #region ExampleA
  // Demonstrates how to create a chart with error bars using SciChart.js
  const {
    SciChartSurface,
    NumericAxis,
    FastErrorBarsRenderableSeries ,
    HlcDataSeries,
    EErrorMode,
    EErrorDirection,
    EDataPointWidthMode,
    SciChartJsNavyTheme
  } = SciChart;

  // or, for npm, import { SciChartSurface, ... } from "scichart"

  const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
  });
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

  const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];
  const yValues = [2.5, 3.5, 3.7, 4.0, 5.0, 5.5, 5.0, 4.0, 3.0];
  const highValues = [3.7, 3.8, 4.0, 5.3, 5.9, 5.7, 5.0, 4.3, 3.2];
  const lowValues = [2.2, 3.4, 3.3, 3.8, 5.0, 4.8, 3.5, 3.0, 1.8];

  const dataSeries = new HlcDataSeries(wasmContext, {
    xValues,
    yValues,
    highValues,
    lowValues
  });

  const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
    dataSeries,
    stroke: "#50C7E0",
    strokeThickness: 2,
    // Optional parameters. Defaults are Both, Vertical
    errorMode: EErrorMode.Both,
    errorDirection: EErrorDirection.Vertical,
    // More optional parameters. Defaults are 0.5, Relative
    dataPointWidth: 0.5,
    dataPointWidthMode: EDataPointWidthMode.Relative
  });

  sciChartSurface.renderableSeries.add(errorBarsSeries);
  // #endregion

  // Optional: add zooming, panning for the example
  const { MouseWheelZoomModifier, ZoomPanModifier, ZoomExtentsModifier } = SciChart;
  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomPanModifier, new ZoomExtentsModifier());
};

simpleErrorBarsChart("scichart-root");





async function builderExample(divElementId) {
  // #region ExampleB
  // Demonstrates how to create a chart with error bars in SciChart.js using the Builder API
  const {
    chartBuilder,
    ESeriesType,
    EThemeProviderType
  } = SciChart;

  // or, for npm, import { chartBuilder, ... } from "scichart"

  const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
    surface: { theme: { type: EThemeProviderType.Dark } },
    series: [
      {
        type: ESeriesType.ErrorBarsSeries,
        hlcData: {
          xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8],
          yValues: [2.5, 3.5, 3.7, 4.0, 5.0, 5.5, 5.0, 4.0, 3.0],
          highValues: [3.7, 3.8, 4.0, 5.3, 5.9, 5.7, 5.0, 4.3, 3.2],
          lowValues: [2.2, 3.4, 3.3, 3.8, 5.0, 4.8, 3.5, 3.0, 1.8]
        },
        options: {
          stroke: "#50C7E0",
          strokeThickness: 3,
        }
      }
    ]
  });
  // #endregion
};



// Uncomment this to use the builder example
//builderExample("scichart-root");

  

Error Mode

FastErrorBarsRenderableSeries.errorMode property defines whether high and low caps should be displayed on error bars. Available values are defined by enum EErrorMode. We can set this property either via the series itself, or passing in to constructor options (see type IFastErrorBarsRenderableSeriesOptions).

The following example shows how to use only high error on bars.

High error bars only
Copy Code
const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
    dataSeries: hlcDataSeries,
    errorMode: EErrorMode.High,
});

This results in the following output:

Horizontal Error Bars

It is possible to change the direction of Error Bars to horizontal using FastErrorBarsRenderableSeries.errorDirection property. In this case the High & Low values in HlcDataSeries are applied in the X-direction.

Horizontal Error Bars
Copy Code
import { EErrorDirection } from "scichart";
// ...
const xValues = [0, 1, 2, 2.5, 4.5, 5, 6, 7, 8];
const yValues = [2.5, 3.5, 3.7, 4.0, 5.0, 5.5, 5.0, 4.0, 3.0];
const lowValues = [-0.5, 0.6, 1.1, 2.3, 4.0, 4.9, 5.8, 6.8, 7.5];
const highValues = [0.4, 1.2, 2.1, 3.0, 4.7, 5.7, 6.5, 7.3, 8.9];
const hlcDataSeries = new HlcDataSeries(wasmContext, {
    xValues,
    yValues,
    // High, Low becomes left-right as absolute values
    highValues,
    lowValues
});
const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
    dataSeries: hlcDataSeries,
    errorDirection: EErrorDirection.Horizontal,
});
// ...

This results in the following output:

Error Bars Advanced Properties

Setting Stroke, StrokeThickness and StrokeDash

Error Bars in SciChart.js support setting strokestrokeThickness and strokeDashArray to set a dashed line style.

For example, this code:

Error Bars Line Styles
Copy Code
const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
    dataSeries: hlcDataSeries,
    stroke: "Aqua",
    strokeDashArray: [4, 2],
    strokeThickness: 4,
});

Results in this:

Tip! Learn more about Dashed Line Styling at this documentation page.

Drawing a Line and PointMarker through Error Bars

You can add a PointMarker to highlight the Y-value of an HlcDataSeries. The data can also be used twice to display both lines / scatter points and error bars.

Try this code out:

Lines and ErrorBars
Copy Code
import { FastLineRenderableSeries, FastErrorBarsRenderableSeries, HlcDataSeries, EllipsePointMarker  } from "scichart";

// Many RenderableSeries can share one DataSeries in SciChart
// Use the HlcDataSeries on a FastLineRenderableSeries, it will render XY value
const lineSeries = new FastLineRenderableSeries(wasmContext, { dataSeries: hlcDataSeries, stroke: "SteelBlue" });

// Use the same HlcDataSeries on a FastErrorBarsRenderableSeries. It will render high/lows for error bars
const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
    dataSeries: hlcDataSeries,
    stroke: "SteelBlue",
    strokeThickness: 3,
    opacity: 0.77,
    pointMarker: new EllipsePointMarker(wasmContext, {
        width: 10,
        height: 10,
        fill: "SteelBlue",
        stroke: "#333"
    })
});

sciChartSurface.renderableSeries.add(lineSeries);
sciChartSurface.renderableSeries.add(errorBarsSeries);

This results in the folllowing output:

Setting the Width of Error Bars Whiskers

You can define the width of Error Bars using dataPointWidth and dataPointWidthMode which supports values from EDataPointMode.

For example. setting dataPointWidthMode to Absolute and dataPointWidth to 50 ensures 50 pixels always.

dataPointWidth on ErrorBars
Copy Code
const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
    dataSeries: hlcDataSeries,
    stroke: "LightSteelBlue",
    strokeThickness: 3,
    dataPointWidth: 50,
    dataPointWidthMode: EDataPointWidthMode.Absolute,
});
sciChartSurface.renderableSeries.add(errorBarsSeries);

The alternative mode is EDataPointWidthMode.Relative. In this mode a dataPointWidth value of 0.0 - 1.0 occupies 0% to 100% of the available space as calculated by SciChart.js.

dataPointWidth on ErrorBars (2)
Copy Code
const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
    dataSeries: hlcDataSeries,
    stroke: "LightSteelBlue",
    strokeThickness: 3,
    dataPointWidth: 0.2,
    dataPointWidthMode: EDataPointWidthMode.Relative,
});
sciChartSurface.renderableSeries.add(errorBarsSeries);

Showing/Hiding Error Bars Connector or Whiskers 

You can specify which parts of an Error Bar should be visible using drawConnector and drawWhiskers and finally;

hiding ErrorBar Parts
Copy Code
const errorBarsSeries = new FastErrorBarsRenderableSeries(wasmContext, {
    dataSeries: hlcDataSeries,
    stroke: "LightSteelBlue",
    strokeThickness: 3,
    drawConnector: false, // Draw the horizontal connector
    drawWhiskers: true,   // Draw the top/bottom whiskers
});
sciChartSurface.renderableSeries.add(errorBarsSeries);

Results in this: