New to Kendo UI for Vue? Start a free 30-day trial

Error Bars

The error bars enable you to indicate the variability of the Chart data.

To display error bars, either:

Binding Specific Values

The binding of specific high and low values in the Charts requires different approaches when working with:

Categorical Charts

For categorical charts, you can bind the values by specifying the high and low fields from the data through the errorHighField and errorLowField options of the series.

The following example demonstrates how to bind the values for Categorical series.

Example
View Source
Change Theme:

Scatter Charts

For scatter charts, you can display error bars both for the X-axis and for the Y-axis values. To bind the values for the X axis, set the xErrorLowField and xErrorHighField options of the series. To bind the values for the Y axis, set the yErrorLowField and yErrorHighField options of the series.

The following example demonstrates how to bind the values for scatter series.

Example
View Source
Change Theme:

Calculating Values Based on Data

The Chart supports the calculation of the low and high values based on the point value.

To specify the way the values are calculated:

Numeric Values

The high and low values are calculated by adding or subtracting the value to the point value.

Example
View Source
Change Theme:

Array Values

The high and low values are calculated by adding the second element to and subtracting the first element from the point value.

Example
View Source
Change Theme:

Percentage Values

The high and low values are calculated by adding or subtracting the value to a percentage of the point value. To use percentage values, set a string value in the 'percentage(n)' format where n indicates the percentage.

Example
View Source
Change Theme:

Statistical Values

The error bars support statistical calculations based on the series data.

The available types are:

  • Standard errors. To specify that a standard error will be used, set "stderr" as a value.
  • Population standard deviations. To use a standard deviation, set "stddev" with an optional number between parentheses appended at the end. The number will be multiplied by the calculated standard deviation value.
Example
View Source
Change Theme:

Custom Values

If you need a custom algorithm to calculate the high and low value, specify a function. The function is expected to return a valid error bar value and passes an object with the following fields:

  • dataItem—The point data item.
  • value—The point value.
  • category—The point category.
  • index—The point index.
  • series—The series configuration.
Example
View Source
Change Theme: