React 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

TS JS

Backend API

import React from 'react'; import Chart, { CommonSeriesSettings, Series, ValueErrorBar, Pane, ArgumentAxis, ValueAxis, Export, Legend, Label, Title, Tooltip, Grid, } from 'devextreme-react/chart'; import type { ChartTypes } from 'devextreme-react/chart'; import { weatherData } from './data.ts'; const customizeTooltip = (pointInfo: ChartTypes.CommonPointInfo): Record<string, string> => ({ text: `${pointInfo.seriesName}: ${pointInfo.value} (range: ${pointInfo.lowErrorValue} - ${pointInfo.highErrorValue})`, }); function App() { return ( <Chart id="chart" dataSource={weatherData} defaultPane="bottom" > <CommonSeriesSettings argumentField="month" /> <Series pane="top" valueField="avgT" name="Average Temperature, °C" > <ValueErrorBar lowValueField="avgLowT" highValueField="avgHighT" lineWidth={1} opacity={0.8} /> </Series> <Series pane="bottom" valueField="avgH" type="bar" name="Average Humidity, %" > <ValueErrorBar type="fixed" value={3} lineWidth={1} /> </Series> <Pane name="top" /> <Pane name="bottom" /> <ArgumentAxis> <Label displayMode="stagger" /> </ArgumentAxis> <ValueAxis pane="top"> <Grid visible={true} /> <Title text="Temperature, °C" /> </ValueAxis> <ValueAxis tickInterval={50} pane="bottom" > <Grid visible={true} /> <Title text="Humidity, %" /> </ValueAxis> <Legend verticalAlignment="bottom" horizontalAlignment="center" /> <Export enabled={true} /> <Tooltip enabled={true} customizeTooltip={customizeTooltip} /> <Title text="Weather in Los Angeles, California" /> </Chart> ); } export default App;

import React from 'react'; import Chart, { CommonSeriesSettings, Series, ValueErrorBar, Pane, ArgumentAxis, ValueAxis, Export, Legend, Label, Title, Tooltip, Grid, } from 'devextreme-react/chart'; import { weatherData } from './data.js'; const customizeTooltip = (pointInfo) => ({ text: `${pointInfo.seriesName}: ${pointInfo.value} (range: ${pointInfo.lowErrorValue} - ${pointInfo.highErrorValue})`, }); function App() { return ( <Chart id="chart" dataSource={weatherData} defaultPane="bottom" > <CommonSeriesSettings argumentField="month" /> <Series pane="top" valueField="avgT" name="Average Temperature, °C" > <ValueErrorBar lowValueField="avgLowT" highValueField="avgHighT" lineWidth={1} opacity={0.8} /> </Series> <Series pane="bottom" valueField="avgH" type="bar" name="Average Humidity, %" > <ValueErrorBar type="fixed" value={3} lineWidth={1} /> </Series> <Pane name="top" /> <Pane name="bottom" /> <ArgumentAxis> <Label displayMode="stagger" /> </ArgumentAxis> <ValueAxis pane="top"> <Grid visible={true} /> <Title text="Temperature, °C" /> </ValueAxis> <ValueAxis tickInterval={50} pane="bottom" > <Grid visible={true} /> <Title text="Humidity, %" /> </ValueAxis> <Legend verticalAlignment="bottom" horizontalAlignment="center" /> <Export enabled={true} /> <Tooltip enabled={true} customizeTooltip={customizeTooltip} /> <Title text="Weather in Los Angeles, California" /> </Chart> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

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

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

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

<!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" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

#chart { height: 440px; }

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.