Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy