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 and scatter charts, or configure the Chart to calculate the values based on the series data.
The following example demonstrates categorical and scatter series with error bars.
Binding Specific Values
The approach for binding specific high and low values differs between categorical and scatter charts.
Categorical Charts
For categorical charts, bind the error bar values by setting the errorHighField and errorLowField options of the series to the corresponding data fields.
The following example demonstrates how to bind error bar values for a categorical series.
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 and xErrorHighField options. To bind the Y-axis values, set the yErrorLowField and yErrorHighField options.
The following example demonstrates how to bind error bar values for a scatter series.
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. - For scatter charts—
errorBars.xValueanderrorBars.yValue.
The supported value types are numeric, array, percentage, statistical, and custom.
Numeric Values
The Chart calculates the high and low values by adding and subtracting a fixed number from the point value.
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.
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.
Statistical Values
The error bars can use statistical calculations based on the series data.
The available types are:
- Standard error—Set the value to
"stderr". - Population 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.
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.
Rendering Custom Error Bars
To fully customize the appearance of the error bars, use the visual property of the errorBars configuration. The visual function receives an ErrorBarsVisualArgs object and must return a 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.
Support and Learning Resources
- Chart Error Bars Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- Axes
- Chart Area
- Crosshairs
- Labels
- Legend
- Notes
- Panes
- Plot Area
- Plot Bands
- Selection
- Series
- Title
- Tooltip
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base