JavaScript/jQuery 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

$(() => { $('#chart').dxChart({ dataSource, commonSeriesSettings: { argumentField: 'month', }, panes: [{ name: 'top', }, { name: 'bottom', }], defaultPane: 'bottom', series: [{ pane: 'top', valueField: 'avgT', name: 'Average Temperature, °C', valueErrorBar: { lowValueField: 'avgLowT', highValueField: 'avgHighT', lineWidth: 1, opacity: 0.8, }, }, { pane: 'bottom', valueField: 'avgH', type: 'bar', name: 'Average Humidity, %', valueErrorBar: { type: 'fixed', value: 3, lineWidth: 1, }, }], argumentAxis: { label: { displayMode: 'stagger', }, }, export: { enabled: true, }, valueAxis: [{ pane: 'top', grid: { visible: true, }, title: { text: 'Temperature, °C', }, }, { tickInterval: 50, pane: 'bottom', grid: { visible: true, }, title: { text: 'Humidity, %', }, }], tooltip: { enabled: true, customizeTooltip(arg) { return { text: `${arg.seriesName}: ${arg.value} ( range: ${arg.lowErrorValue} - ${arg.highErrorValue})`, }; }, }, legend: { verticalAlignment: 'bottom', horizontalAlignment: 'center', }, title: { text: 'Weather in Los Angeles, California', }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.5/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.5"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart"></div> </div> </body> </html>

#chart { height: 440px; }

const dataSource = [{ 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, }];

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.