# Error Bars The error bars indicate the variability of the Chart data. You can bind specific high and low values from the data for both [categorical](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#categorical-charts) and [scatter](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#scatter-charts) charts, or configure the Chart to [calculate the values](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#calculating-values-based-on-data) based on the series data. The following example demonstrates categorical and scatter series with error bars. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/error-bars/overview/source.txt) ## Binding Specific Values The approach for binding specific high and low values differs between [categorical](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#categorical-charts) and [scatter](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#scatter-charts) charts. ### Categorical Charts For categorical charts, bind the error bar values by setting the [`errorHighField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#errorhighfield) and [`errorLowField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#errorlowfield) options of the series to the corresponding data fields. The following example demonstrates how to bind error bar values for a categorical series. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/error-bars/source.txt) ### Scatter Charts For scatter charts, you can display error bars for both the X-axis and the Y-axis values. To bind the X-axis values, set the [`xErrorLowField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#xerrorlowfield) and [`xErrorHighField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#xerrorhighfield) options. To bind the Y-axis values, set the [`yErrorLowField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#yerrorlowfield) and [`yErrorHighField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#yerrorhighfield) options. The following example demonstrates how to bind error bar values for a scatter series. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/error-bars/scatter/source.txt) ## Calculating Values Based on Data The Chart can calculate the low and high values based on the point value. To configure the calculation, set one of the following properties: * For categorical charts—[`errorBars.value`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieserrorbars#value). * For scatter charts—[`errorBars.xValue`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieserrorbars#xvalue) and [`errorBars.yValue`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieserrorbars#yvalue). The supported value types are [numeric](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#numeric-values), [array](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#array-values), [percentage](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#percentage-values), [statistical](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#statistical-values), and [custom](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars#custom-values). ### Numeric Values The Chart calculates the high and low values by adding and subtracting a fixed number from the point value. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/error-bars/numeric-values/source.txt) ### Array Values The Chart adds the second array element to the point value and subtracts the first element from it to calculate the high and low values. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/error-bars/array-values/source.txt) ### Percentage Values The Chart calculates the high and low values by adding and subtracting a percentage of the point value. To use percentage values, set a string in the `'percentage(n)'` format where `n` indicates the percentage. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/error-bars/percentage-values/source.txt) ### Statistical Values The error bars can use statistical calculations based on the series data. The available types are: * [Standard error](https://en.wikipedia.org/wiki/Standard_error)—Set the value to `"stderr"`. * [Population standard deviation](https://en.wikipedia.org/wiki/Standard_deviation)—Set the value to `"stddev"`. Optionally, append a multiplier in parentheses, for example, `"stddev(2)"`. The Chart multiplies the calculated standard deviation by this number. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/error-bars/statistical-values/source.txt) ### Custom Values To calculate the high and low values with a custom algorithm, provide a function. The function must return a valid error bar value. It receives 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-angular-ui/demos/charts/elements/error-bars/custom-values/source.txt) ## Rendering Custom Error Bars To fully customize the appearance of the error bars, use the [`visual`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/serieserrorbars#visual) property of the `errorBars` configuration. The `visual` function receives an [`ErrorBarsVisualArgs`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/errorbarsvisualargs) object and must return a Drawing API [`Element`](https://www.telerik.com/kendo-angular-ui-develop/components/drawing/api/element). The `ErrorBarsVisualArgs` object provides the following properties: * `rect`—The rectangle that defines the position and size of the error bar. * `high`—The high value of the error bar. * `low`—The low value of the error bar. * `options`—The error bar options. * `createVisual`—A function that returns the default visual. * `sender`—The Chart component instance. The following example demonstrates how to render custom error bars with caps by using the Drawing API `Path` element. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/error-bars/custom-visual/source.txt) ## Support and Learning Resources * [Chart Error Bars Homepage](https://www.telerik.com/kendo-angular-ui/charts#error-bars) * [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started) * [API Reference of the Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api) * [Axes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes) * [Chart Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/chart-area) * [Crosshairs](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs) * [Labels](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels) * [Legend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/legend) * [Notes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/notes) * [Panes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/panes) * [Plot Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-area) * [Plot Bands](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-bands) * [Selection](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/selection) * [Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series) * [Title](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/title) * [Tooltip](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/tooltips) * [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started) * [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial) * [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding) * [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256) * [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular) * [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base) ## Additional Resources * [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular) * [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui) * [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)