Edit this page

Error Bars

Error bars can be used to show variability of data. This article describes the way you can use them in a Kendo UI Chart widget.

Configuration

The Error bars are specified as part of the series definition and are supported for the following series types:

  • Area
  • Vertical Area
  • Column
  • Bar
  • Line
  • Vertical Line
  • Scatter
  • ScatterLine

The low and high value for the error bars can either be bound to the data or be calculated from the point or series values.

Data Binding

Bind to Categorical Series

To bind the error bars low and high values when using categorical series, set the errorLowField and errorHighField options to the fields in the data that hold the low and high value, as demonstrated below.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "column",
    errorLowField: "low",
    errorHighField: "high",
    data: [{value: 4.743, low: 4.5, high: 5}, {value: 7.295, low: 7, high: 8},
      {value: 6.376, low: 5, high: 6.5}]
  }]
});
</script>

Bind to Scatter Series

Error bars can be displayed for the series x value, y value or both. To set the low and high fields for the series x value, set the xErrorLowField and xErrorHighField series options. The low and high fields for the series y value, can be specified with the yErrorLowField and yErrorHighField options.

The example below demonstrates how to bind the error bars for the series x value.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    xErrorLowField: "low",
    xErrorHighField: "high",
    data: [{x: 6.4, y: 13.4, low: 5, high: 7}, {x: 1.7, y: 11, low: 1, high: 3},
      {x: 5.4, y: 8, low: 3, high: 6}]
  }]
});
</script>

The example below demonstrates how to bind the error bars for the series y value.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    yErrorLowField: "low",
    yErrorHighField: "high",
    data: [{x: 6.4, y: 13.4, low: 12, high: 14}, {x: 1.7, y: 11, low: 11, high: 14},
      {x: 5.4, y: 8, low: 5, high: 8}]
  }]
});
</script>

Set Error Bars Value

The error bars low and high value can be calculated based on the series point values. To set the error bars value for categorical series, specify the series.errorBars.value option. For scatter series set the series.errorBars.xValue or series.errorBars.yValue options or both.

Set Numeric Value

If the error bars value is set to a number (must not be negative), the low and high value are calculated by subtracting or adding the value to the series value.

The example below demonstrates how to set a numeric values for categorical series.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "column",
    errorBars: {
      value: 1
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
</script>

The example below demonstrates how to set a numeric values for scatter series.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    errorBars: {
      yValue: 2
    },
    data: [{x: 6.4, y: 13.4}, {x: 1.7, y: 11}, {x: 5.4, y: 8}]
  }]
});
</script>

Set Array Values

The difference can also be set separately for the low and high value by setting an array with two numeric values. In this case, the low value is calculated by subtracting the array first value from the point value. The high value is calculated by adding the second value to the point value.

The example below demonstrates how to set an array for categorical series.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "column",
    errorBars: {
      value: [0.7, 1]
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
</script>

The example below demonstrates how to set an array for scatter series.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    errorBars: {
      yValue: [1, 2]
    },
    data: [{x: 6.4, y: 13.4}, {x: 1.7, y: 11}, {x: 5.4, y: 8}]
  }]
});
</script>

Set Percentage Values

It is also possible to set the difference of the point value as percentage. To achieve this, set a string value in the format "percenatage(n)" where n indicates the percent value, as demonstrated in the example below.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{        
    errorBars: {
      value: "percentage(20)"
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
</script>

Set Statistical Values

The error bars support statistical calculations based on the series data. The supported types are standard error and population standard deviation. To specify that standard error is to be used, set "stderr" as a value. To use standard deviation, set "stddev" with an optional number between parentheses appended at the end. The number is going to be multiplied by the calculated standard deviation value.

The example below demonstrates how to use the standard error type.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    errorBars: {
      value: "stderr"
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
</script>

The example below demonstrates how to use the standard deviation type.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{    
    errorBars: {
      value: "stddev(0.5)"
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
</script>

Calculate Low and High Values

If a custom algorithm is needed to calculate the low and high value, specify a function. The function accepts an object and returns a valid error bar value. The following fields as object parameters are available:

  • dataItem—The point data item.
  • value—The point value.
  • index—The point index in the series data.
  • category—The point category value if a categorical chart is used.
  • series—The series configuration.

The example below demonstrates how to use different percentages for the low and high value.

Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    errorBars: {
      value: function(data) {          
          var value = data.value,
            lowPercentage = value * 0.05,
            highPercentage = value * 0.1;                                    
          return [lowPercentage, highPercentage];
      }
    },
    data: [{value: 4.743}, {value: 7.295}, {value: 6.376}]
  }]
});
</script>

See Also

Other articles on Kendo UI Charts:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy