Still have questions?
Contact support

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;

Scatter: Line, Marker.

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

JsFiddle Playground

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

JsFiddle Playground

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:

JsFiddle Playground

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%");

JsFiddle Playground

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.

JsFiddle Playground

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.

JsFiddle Playground

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.

JsFiddle Playground

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

JsFiddle Playground

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");

JsFiddle Playground

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:

JsFiddle Playground

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:

JsFiddle Playground

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.

JsFiddle Playground

Labels And Tooltips

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

JsFiddle Playground

Samples

You can see a lot of other samples in AnyChart Web Error Charts Gallery.