AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

Error Chart

Overview

Error bars are visual representations of the variability of data: they indicate the error or uncertainty in a measurement or calculation. The length of bars shows how far from the reported value the true value might be.

This feature is often used with scatter charts, but Cartesian charts in AnyChart also support error bars - see the Supported Types section.

This article explains how to create and configure error bars on both Cartesian and scatter charts.

Modules

Error bars do not require any modules except the modules required by the chart on which they are created.

For scatter charts, combine the Core module with the Scatter module:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-scatter.min.js"></script>

For Cartesian charts, combine Core module with Basic Cartesian:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-cartesian.min.js"></script>

You can also use the Base module, which includes, among other things, all the modules mentioned above:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-base.min.js"></script>

Learn more: Modules.

Quick Start

To add error bars to a series, use the error() method with a parameter specifying the length of bars (either as a percentage or in pixels).

Here is a basic sample showing how to create a Column chart with error bars:

// create data
var data = [
  ["January", 10000],
  ["February", 12000],
  ["March", 13000],
  ["April", 10000],
  ["May", 9000]
];

// create a chart
chart = anychart.column();

// create a column series and set the data
var series = chart.column(data);

// create error bars
series.error("10%");

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

Playground

Lower and Upper Bars

On Cartesian Charts

Cartesian charts support error bars along the Y-axis. The error() method adds error bars to all points of a series and sets lower and upper bars as equal, but you can also use the following methods to fine-tune them:

Note: The valueLowerError() and valueUpperError() methods have priority over valueError().

In the sample below, there are two Column series with different lower and upper error bars:

// create error bars on the first series
series1.error().valueError(400);

// create error bars on the second series
series2.error().valueLowerError(700);
series2.error().valueUpperError(200);

Playground

The next sample shows how to add customized error bars to particular points of a Cartesian series:

// create data
var data = [
  {x: "A", value: 10000, valueError: "6%"},
  {x: "B", value: 12000},
  {x: "C", value: 13000, valueLowerError: 700, valueUpperError: 200},
  {x: "D", value: 10000, valueUpperError: 600},
  {x: "E", value: 9000}
];

Playground

On Scatter Charts

The key feature of error bars on scatter charts is that errors can be set both along the X- and Y-axes.

The error() method adds error bars to all points of a series and sets lower/upper and right/left bars as equal, but you can also use the methods below to fine-tune them.

Here are the methods configuring error bars along the Y-axis:

And these methods configure error bars along the X-axis:

Note: The valueLowerError(), valueUpperError(), xLowerError(), and xUpperError() methods have priority over valueError() and xError().

In the following sample, there is a scatter chart with two Marker series and customized lower/upper and right/left error bars:

// create error bars on the first series
series1.error().valueError(8);
series1.error().xError(0.4);

// create error bars on the second series
var error2 = series2.error(); 
error2.valueLowerError(7);
error2.valueUpperError(4);
error2.xLowerError(0.1);
error2.xUpperError(0.2);

Playground

This sample shows how to add customized error bars to particular points of a series on a scatter chart:

// create data
var data = [
  {x: 0.6, value: 22, valueError: 8, xError: 0.2},
  {x: 1.7, value: 55, xLowerError: "6%", xUpperError:  "10%"},
  {x: 2.3, value: 50, valueError: "12%"},
  {x: 2.6, value: 76, valueUpperError: 7},
  {x: 2.7, value: 64},
  {x: 4, value: 71},
  {x: 4, value: 88, valueLowerError: 6, valueUpperError: 4, xError: 0.4},
  {x: 4.5, value: 74},
  {x: 4.9, value: 83}
];

Playground

Error Mode

By default, both Y- and X-error bars are shown. However, you can show only Y- or X-bars or disable both. To set the error mode, call the mode() method with one of the parameters listed in anychart.enums.ErrorMode:

  • "both" (default)
  • "value"
  • "x"
  • "none"
    // create and configure error bars
var error = series.error();
error.xLowerError(0.1);
error.xUpperError(0.2);
error.valueUpperError(5);
error.valueLowerError(8);

// show only value error bars 
error.mode("value");

Playground

Appearance

Here is the full list of methods used to configure the appearance of error bars:

Each of the series types that support error bars has its own visual settings - see the Supported Types section. Also, you can learn more from the Appearance Settings section.

In the sample below, there is scatter chart with two Marker series and error bars on both of them, some of the appearance settings configured:

// create error bars on the first series
var error1 = series1.error();
error1.valueError(8);
error1.xError(0.4);

// configure the appearance of error bars on the first series
error1.valueErrorWidth(6);
error1.xErrorWidth(0);
error1.valueErrorStroke("#6fb6ee", 2);
error1.xErrorStroke("#6fb6ee", 2, "2 2", "round");

// create error bars on the second series
var error2 = series2.error(); 
error2.valueLowerError(7);
error2.valueUpperError(4);
error2.xLowerError(0.1);
error2.xUpperError(0.2);

// configure the appearance of error bars on the second series
error2.valueErrorWidth(6);
error2.xErrorWidth(6);
error2.valueErrorStroke("black", 0.5);
error2.xErrorStroke("black", 0.5);

Playground

Labels and Tooltips

Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in a single point). For text labels, font settings and text formatters are available.

A Tooltip is a text box displayed when a point on a chart is hovered over. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.

Tokens

To change the text of labels, combine the labels() method of the series (or the chart if it is a scatter chart) and format() with tokens.

To configure tooltips, do the same with the tooltip() and format() methods.

Besides tokens that work everywhere, there are tokens that are specific to error bars:

  • {%valueLowerError}
  • {%valueUpperError}
  • {%xLowerError}
  • {%xUpperError}

This is how they can be used to customize labels and tooltips:

//configure labels
series.labels().enabled(true);
series.labels().format("{%value} (\u00b1{%valueUpperError})");
series.labels().offsetY(+35);

//configure tooltips
series.tooltip().format("{%value} (\u00b1{%valueUpperError})");

Playground

Formatting Functions

Labels and tooltips are also configured with the help of formatting functions and the following fields (in addition to the default ones):

  • valueLowerError
  • valueUpperError
  • xLowerError
  • xUpperError

In the sample below they are used to customize tooltips:

// configure tooltips
chart.tooltip().format(function() {
  var output = "";
  if (this.xUpperError != 0)
     output = "xUpperError: " + this.xUpperError;
  if (this.xLowerError != 0)
     output = output + "\nxUpperError: " + this.xLowerError;
  if (this.valueLowerError != 0)
     output = output + "\nxUpperError: " + this.valueLowerError;
  if (this.valueUpperError != 0)
     output = output + "\nxUpperError: " + this.valueUpperError;
  if (output == "") return "NO ERRORS";
  return output;
});

Playground

Supported Types

Here is the list of Cartesian chart types that can be combined with error bars:

Scatter charts compatible with error bars include: