Error Chart

Overview

Error Charts are defined as part of the series and are used on graphs to indicate the error, or uncertainty in a reported measurement. Error bars often represent one standard deviation of uncertainty, one standard error (standard deviation of the sampling distribution of a statistic), or a certain confidence interval (e.g., a 95% interval).

Supported Chart Types

Here is the list of series compatible with error bars:

Cartesian: Area, Bar, Column, Line, Marker, Spline, SplineArea, StepArea, StepLine;

Chart

Cartesian

To start configuration of error lines you can go with error() method:

``````  //create chart
var chart = anychart.line();
//set data
var line = chart.line([4, 2, 3, 1]);
//set error value
line.error(1);
``````

If you want to define a total error value and/or the upper and lower error values, you should use the special methods:

Methods Description
.valueError() Used to set a total error value
.valueLowerError() Used to set a lower error value
.valueUpperError() Used to set an upper error value

If you need different error lines for each data point, you can add values to a data set:

``````  chart.line([
{x: "2005", value: 20, valueError: "3%"},
{x: "2006", value: 23, valueError: "4%"},
{x: "2007", value: 22, valueError: "3%"},
{x: "2008", value: 19, valueError: 1},
{x: "2009", value: 23, valueError: 1}
]);
``````

If you use only the .valueError() method, the upper and lower values will be equal to half of the specified value. The method .valueError() usage has priority over that of .valueLowerError() or .valueUpperError() usage. The code below demonstrates an error where the upper and lower values are equal to 3.

``````  var error = series.error();
error.valueUpperError(2);
error.valueLowerError(6);
error.valueError(6);
``````

AnyChart html5 charting library allows you to set an error value in different ways, e.g. as absolute numbers or as a percentage:

``````  // variable for errors
var error = series.error();

//set the value in numbers
error.valueError(6);

//or set it in percentage
error.valueError("15%")
``````

As you can see we've created the error bars on a chart using the settings listed in the above table:

Also it should be noted that you can do the same using the .error() method. The sample below demonstrates how to apply a total error to a full data set.

``````  //set the error value in numbers
series.error(7);

//or set it in percentage
series.error("12%");
``````

Note: You can show error bars for x values in the case of e.g. an error in measurement of the data set. Have a look at the section below to learn more how to define an error on a series x value.

Scatter

Error bars can be displayed for the series x value, y value or both. You should use an appropriate set of methods to set the low and high values for the series x error value:

Methods Description
.xError() Used to set a common series x error value
.xLowerError() Used to set a lower x error value
.xUpperError() Used to set an upper x error value

And now we have an error defined on a scatter plot.

X value error value must be defined in numbers or percentage of total value.

``````  var error = series.error();

//you can set the x error value
error.xError(10);

//or set it in percentage
error.xError("15%")
``````

The same rules can be applied in case of scatter plot. Below is a demonstration of error defined with the foreground .xError() method.

It is also possible to apply a separate error bar to each data point within a series on a scatter plot:

Error Mode

If you want to specify the visibility of the upper and lower error values - you should use the .mode() method:

Value Description
none Error won't be displayed
value Error will be displayed for y value
x Error will be displayed for x value
both Error will be displayed for both x and y values

Let's take a look at this part of code. As we can see the both error values are defined for some points (see the chart above), but since we configured the error mode as "none", nothing will be rendered.

``````  var series = chart.marker([
{x: 192, y: 9, xUpperError: "2%", xLowerError: "1%"},
{x: 168, y: 24, xUpperError: "3%", xLowerError: "3%", valueUpperError: 3},
{x: 154, y: 30, xError: 6},
{x: 132, y: 41, xUpperError: "3%", xLowerError: "3%"},
{x: 114, y: 53, xUpperError: 2, xLowerError: "3%", valueLowerError: "7%"},
{x: 94, y: 74, xError: "4%", "valueError": "6%"},
{x: 83, y: 85, xUpperError: "3%", xLowerError: "5%", valueUpperError: "5%", valueLowerError: "2%"}
]);

var error = series.error();
error.mode("none");
``````

Or you can use only "value" error mode with the same error settings:

``````  var error = series.error();
error.xLowerError("2%");
error.xUpperError("2%");
error.valueUpperError(8);
error.valueLowerError("4%");
error.mode("value");
``````

And the chart looks appropriate:

Visualization

AnyChart html5 charting framework provides a few opportunities to configure an error view. If you want to customize the error width you should use these methods:

Method Description
.xErrorWidth() Used to set a series x value error width
.valueErrorWidth() Used to set an y value error width

``````  var error = series.error();
error.xErrorWidth(30);
error.valueErrorWidth("6%");
``````

Here is the simple demonstration of this feature on the Scatter Line Chart:

To change the error color you have to use the following settings:

Method Description
.xErrorStroke() Used to configure an x error stroke
.valueErrorStroke() Used to configre a series error stroke

Here is a simple code to illustrate how to apply these settings:

``````  // set to the series
var error = series.error();
error.valueErrorStroke("2 red .9");
error.xErrorStroke("4px green .4");

// apply to the specific point
{
x: 94,
value: 74,
xError: 6,
valueError: 4,
valueErrorStroke: "red",
xErrorStroke: "green"
},
``````

Look at the chart sample below and click on it to see it's javascript source.

Labels And Tooltips

If you want to configure data labels and tooltips to display information about the error bars - you should do that in .labels() and .tooltips() methods. You can tune their visual appearance, positioning and format.

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