# 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.

## Quick Start

To add error bars to a series, use the error() method with a parameter specifying the length of bars (either in percent 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();
``````

## 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);
``````

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}
];
``````

### 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);
``````

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}
];
``````

## Error Mode

The mode() method allows you to change the error mode of a series (to enable or disable error bars on it). There are four possible error modes that are set by these parameters:

• `"both"` enables both X- and Y-error bars
• `"none"` disables all error bars
• `"value"` shows only Y-bars
• `"x"` shows only X-bars
``````// 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");
``````

## Appearance

Here is a 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);
``````

## 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. 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}`

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

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

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

### 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;
});
``````

## Supported Types

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

Scatter charts compatible with error bars include:

You are looking at an outdated 8.0.1 version of this document. Switch to the 8.4.0 version to see the up to date information.