# Error Bars The error bars enable you to indicate the variability of the Chart data. To display error bars, either: * [Bind specific high and low values from the data](https://www.telerik.com/kendo-vue-ui/components/charts/elements/error-bars#binding-specific-values), or * [Configure the Chart to calculate the high and low values based on the series values](https://www.telerik.com/kendo-vue-ui/components/charts/elements/error-bars#calculating-values-based-on-data). ## Binding Specific Values The binding of specific high and low values in the Charts requires different approaches when working with: * [Categorical charts](https://www.telerik.com/kendo-vue-ui/components/charts/elements/error-bars#categorical-charts) * [Scatter charts](https://www.telerik.com/kendo-vue-ui/components/charts/elements/error-bars#scatter-charts) ### Categorical Charts For categorical charts, you can bind the values by specifying the high and low fields from the data through the [`errorHighField`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartseriesitemprops#errorhighfield) and [`errorLowField`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartseriesitemprops#errorlowfield) options of the series. The following example demonstrates how to bind the values for Categorical series. [Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/error-bars/overview/source.txt) ### 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`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartseriesitemprops#xerrorlowfield) and [`xErrorHighField`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartseriesitemprops#xerrorhighfield) options of the series. To bind the values for the Y axis, set the [`yErrorLowField`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartseriesitemprops#yerrorlowfield) and [`yErrorHighField`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartseriesitemprops#yerrorhighfield) options of the series. The following example demonstrates how to bind the values for scatter series. [Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/error-bars/scatter/source.txt) ## 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: * For categorical charts, set the [`errorBars.value`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartserieserrorbarsprops#value). * For scatter charts, set the [`errorBars.xValue`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartserieserrorbarsprops#xvalue) and [`errorBars.yValue`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartserieserrorbarsprops#yvalue) for scatter series, to one of the following values: * [Numeric](https://www.telerik.com/kendo-vue-ui/components/charts/elements/error-bars#numeric-values) * [Array](https://www.telerik.com/kendo-vue-ui/components/charts/elements/error-bars#array-values) * [Percentage](https://www.telerik.com/kendo-vue-ui/components/charts/elements/error-bars#percentage-values) * [Statistical](https://www.telerik.com/kendo-vue-ui/components/charts/elements/error-bars#statistical-values) * [Custom](https://www.telerik.com/kendo-vue-ui/components/charts/elements/error-bars#custom-values) ### Numeric Values The high and low values are calculated by adding or subtracting the value to the point value. [Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/error-bars/numeric-values/source.txt) ### Array Values The high and low values are calculated by adding the second element to and subtracting the first element from the point value. [Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/error-bars/array-values/source.txt) ### 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. [Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/error-bars/percentage-values/source.txt) ### Statistical Values The error bars support statistical calculations based on the series data. The available types are: * [Standard errors](https://en.wikipedia.org/wiki/Standard_error). To specify that a standard error will be used, set `"stderr"` as a value. * [Population standard deviations](https://en.wikipedia.org/wiki/Standard_deviation). 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. [Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/error-bars/statistical-values/source.txt) ### 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. [Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/error-bars/custom/source.txt) ## Suggested Links * [Axes](https://www.telerik.com/kendo-vue-ui/components/charts/elements/axes) * [Chart Area](https://www.telerik.com/kendo-vue-ui/components/charts/elements/chart-area) * [Crosshairs](https://www.telerik.com/kendo-vue-ui/components/charts/elements/crosshairs) * [Labels](https://www.telerik.com/kendo-vue-ui/components/charts/elements/labels) * [Legend](https://www.telerik.com/kendo-vue-ui/components/charts/elements/legend) * [Notes](https://www.telerik.com/kendo-vue-ui/components/charts/elements/notes) * [Panes](https://www.telerik.com/kendo-vue-ui/components/charts/elements/panes) * [Plot Area](https://www.telerik.com/kendo-vue-ui/components/charts/elements/plot-area) * [Plot Bands](https://www.telerik.com/kendo-vue-ui/components/charts/elements/plot-bands) * [Selection](https://www.telerik.com/kendo-vue-ui/components/charts/elements/selection) * [Series](https://www.telerik.com/kendo-vue-ui/components/charts/elements/series) * [Title](https://www.telerik.com/kendo-vue-ui/components/charts/elements/title) * [Tooltip](https://www.telerik.com/kendo-vue-ui/components/charts/elements/tooltips) * [API Reference of the Chart](https://www.telerik.com/kendo-vue-ui/components/charts/api)