Angular Charts - Error Bars

DevExtreme Chart supports value error bars. These bars indicate data measurement tolerances and confidence intervals. Use the series.valueErrorBar object to configure error bar settings and appearance.

www.wikipedia.org

Backend API

<dx-chart id="chart" defaultPane="bottom" [dataSource]="weatherData" title="Weather in Los Angeles, California" > <dxi-chart-series pane="top" valueField="avgT" name="Average Temperature, °C"> <dxo-chart-value-error-bar lowValueField="avgLowT" highValueField="avgHighT" [lineWidth]="1" [opacity]="0.8" > </dxo-chart-value-error-bar> </dxi-chart-series> <dxi-chart-series pane="bottom" valueField="avgH" type="bar" name="Average Humidity, %" > <dxo-chart-value-error-bar type="fixed" [value]="3" [lineWidth]="1"> </dxo-chart-value-error-bar> </dxi-chart-series> <dxo-chart-common-series-settings argumentField="month" ></dxo-chart-common-series-settings> <dxi-chart-pane name="top"></dxi-chart-pane> <dxi-chart-pane name="bottom"></dxi-chart-pane> <dxo-chart-argument-axis> <dxo-chart-label displayMode="stagger"></dxo-chart-label> </dxo-chart-argument-axis> <dxo-chart-export [enabled]="true"></dxo-chart-export> <dxi-chart-value-axis pane="top"> <dxo-chart-grid [visible]="true"></dxo-chart-grid> <dxo-chart-title text="Temperature, °C"></dxo-chart-title> </dxi-chart-value-axis> <dxi-chart-value-axis [tickInterval]="50" pane="bottom"> <dxo-chart-grid [visible]="true"></dxo-chart-grid> <dxo-chart-title text="Humidity, %"></dxo-chart-title> </dxi-chart-value-axis> <dxo-chart-tooltip [enabled]="true" [customizeTooltip]="customizeTooltip" ></dxo-chart-tooltip> <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center"> </dxo-chart-legend> </dx-chart>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxChartModule } from 'devextreme-angular'; import { Service, Weather } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxChartModule, ], }) export class AppComponent { weatherData: Weather[]; constructor(service: Service) { this.weatherData = service.getWeatherData(); } customizeTooltip = ({ seriesName, value, lowErrorValue, highErrorValue, }) => ( { text: `${seriesName}: ${value} ( range: ${lowErrorValue} - ${highErrorValue})`, } ); } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #chart { height: 440px; }

import { Injectable } from '@angular/core'; export class Weather { month: string; avgT: number; avgLowT: number; avgHighT: number; avgH: number; } const weatherData: Weather[] = [{ month: 'January', avgT: 14.1, avgLowT: 9.1, avgHighT: 19.1, avgH: 70, }, { month: 'February', avgT: 14.7, avgLowT: 9.8, avgHighT: 19.6, avgH: 74, }, { month: 'March', avgT: 15.6, avgLowT: 10.6, avgHighT: 20.4, avgH: 79, }, { month: 'April', avgT: 16.8, avgLowT: 11.9, avgHighT: 21.7, avgH: 80, }, { month: 'May', avgT: 18.2, avgLowT: 13.6, avgHighT: 22.7, avgH: 83, }, { month: 'June', avgT: 20.2, avgLowT: 15.4, avgHighT: 25, avgH: 85, }, { month: 'July', avgT: 22.6, avgLowT: 17.3, avgHighT: 27.9, avgH: 86, }, { month: 'August', avgT: 23, avgLowT: 17.7, avgHighT: 28.4, avgH: 86, }, { month: 'September', avgT: 22.3, avgLowT: 17, avgHighT: 27.7, avgH: 83, }, { month: 'October', avgT: 20.1, avgLowT: 14.8, avgHighT: 25.3, avgH: 79, }, { month: 'November', avgT: 17.2, avgLowT: 11.8, avgHighT: 22.7, avgH: 72, }, { month: 'December', avgT: 14.6, avgLowT: 9.5, avgHighT: 19.7, avgH: 68, }]; @Injectable() export class Service { getWeatherData(): Weather[] { return weatherData; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>

To display error bars, specify one of the following pairs of valueErrorBar properties:

lowValueField and highValueField
Bind fields that contain error values for each series point.
value and type
Calculate error bar values based on series data points.

This demo implements predefined error bars specified in the Chart data source.