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

Series.errorBars

configuration

The error bars of the chart series.

The errorBars option is supported when series.type is set to "bar", "column", "line", "area", "scatter", "scatterLine" or "bubble".

series.errorBars

Object

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

series.errorBars.color

String

The color of the error bars. Accepts a valid CSS color string, including hex and rgb.

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

series.errorBars.endCaps

Boolean

If set to false, the error bars caps will not be displayed. By default the caps are visible.

Default: true

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

series.errorBars.line

Object

The error bars line options.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "column",
    data: [4.743, 7.295, 7.175, 6.376],
    errorBars: {
      value: "stddev",
      line: {
        width: 3,
        dashType: "dash"
      }
    }
  }]
});
</script>

series.errorBars.value

String|Number|Array|Function

The error bars value.

The value option is supported when series.type is set to "bar", "column", "line" or "area".

The following value types are supported:

"stderr" - the standard error of the series values will be used to calculate the point low and high value
"stddev(n)" - the standard deviation of the series values will be used to calculate the point low and high value. A number can be specified between the parentheses, that will be multiplied by the calculated standard deviation.
"percentage(n)" - a percentage of the point value
A number that will be subtracted/added to the point value
An array that holds the low and high difference from the point value
A function that returns the errorBars point value

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

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

series.errorBars.visual

Function

A function that can be used to create a custom visual for the error bars. The available argument fields are:

rect - the kendo.geometry.Rect that defines where the visual should be rendered.
options - the error bar options.
createVisual - a function that can be used to get the default visual.
low - the error bar low value.
high - the error bar high value.
sender - the chart instance.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [{
      data: [4.743, 7.295, 7.175, 6.376],
      errorBars: {
        value: "stddev(0.5)",
        visual: function (e) {
          return kendo.drawing.Path.fromRect(e.rect, {
            fill: {
              color: e.options.color
            }
          });
        }
      }
    }]
  });
</script>

series.errorBars.xValue

String|Number|Array|Function

The xAxis error bars value. See the series.errorBars.value option for a list of the supported value types.

The xValue option is supported when series.type is set to "scatter", "scatterLine" or "bubble".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    data:  [[16.4, 5.4], [13.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2]],
    errorBars: {
      xValue: "stderr"
    }
  }]
});
</script>

series.errorBars.yValue

String|Number|Array|Function

The yAxis error bars value. See the series.errorBars.value option for a list of the supported value types.

The yValue option is supported when series.type is set to "scatter", "scatterLine" or "bubble".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "scatter",
    data:  [[16.4, 5.4], [13.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2]],
    errorBars: {
      yValue: "stderr"
    }
  }]
});
</script>

Related Members