series.errorBars Object

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".

Example - set the chart series error bars

<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.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

Example - set the error bars value to a percentage of the 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>

Example - set the error bars value to a half of the series standard deviation

<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.

Example - use custom visual for the error bars

<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".

Example - set the error bars xAxis value

<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".

Example - set the error bars yAxis value

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

series.errorBars.endCaps Boolean (default: true)

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

Example - hide the error bars caps

<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.color String

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

Example - set the error bars color to red

<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.line Object

The error bars line options.

Example

<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.line.width Number (default: 1)

The width of the line.

Example - set the error bars line width

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

series.errorBars.line.dashType String (default: "solid")

The dash type of the error bars line.

The following dash types are supported:

• "dash" - a line consisting of dashes
• "dashDot" - a line consisting of a repeating pattern of dash-dot
• "dot" - a line consisting of dots
• "longDash" - a line consisting of a repeating pattern of long-dash
• "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
• "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
• "solid" - a solid line

Example - set the error bars line dash type

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