DevExtreme v25.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Vue 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
<template> <DxChart id="chart" :data-source="weatherData" default-pane="bottom" > <DxCommonSeriesSettings argument-field="month"/> <DxSeries pane="top" value-field="avgT" name="Average Temperature, °C" > <DxValueErrorBar :line-width="1" :opacity="0.8" low-value-field="avgLowT" high-value-field="avgHighT" /> </DxSeries> <DxSeries pane="bottom" value-field="avgH" type="bar" name="Average Humidity, %" > <DxValueErrorBar :value="3" :line-width="1" type="fixed" /> </DxSeries> <DxPane name="top"/> <DxPane name="bottom"/> <DxArgumentAxis> <DxLabel display-mode="stagger"/> </DxArgumentAxis> <DxValueAxis pane="top"> <DxGrid :visible="true"/> <DxTitle text="Temperature, °C"/> </DxValueAxis> <DxValueAxis :tick-interval="50" pane="bottom" > <DxGrid :visible="true"/> <DxTitle text="Humidity, %"/> </DxValueAxis> <DxLegend vertical-alignment="bottom" horizontal-alignment="center" /> <DxExport :enabled="true"/> <DxTooltip :enabled="true" :customize-tooltip="customizeTooltip" /> <DxTitle text="Weather in Los Angeles, California"/> </DxChart> </template> <script setup lang="ts"> import DxChart, { DxCommonSeriesSettings, DxSeries, DxValueErrorBar, DxPane, DxArgumentAxis, DxValueAxis, DxExport, DxLegend, DxLabel, DxTitle, DxTooltip, DxGrid, } from 'devextreme-vue/chart'; import { weatherData } from './data.ts'; const customizeTooltip = ( { seriesName, value, lowErrorValue, highErrorValue, }: Record<string, any>, ) => ( { text: `${seriesName}: ${value} (range: ${lowErrorValue} - ${highErrorValue})` } ); </script> <style> #chart { height: 440px; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, 'openai': { 'esModule': true, }, }, paths: { 'project:': '../../../../', 'npm:': 'https://cdn.jsdelivr.net/npm/', 'bundles:': '../../../../bundles/', 'externals:': '../../../../bundles/externals/', }, map: { 'vue': 'npm:vue@3.4.27/dist/vue.esm-browser.js', '@vue/shared': 'npm:@vue/shared@3.4.27/dist/shared.cjs.prod.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.2/index.js', 'demo-ts-loader': 'project:utils/demo-ts-loader.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'svg-loader': 'project:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign', 'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs', 'devextreme-vue': 'npm:devextreme-vue@link:../../packages/devextreme-vue/npm/cjs', 'devextreme-quill': 'npm:devextreme-quill@1.7.7/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.24/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.64/dist/dx-gantt.js', 'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', '@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme-vue/common': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/common/core/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; window.process = { env: { NODE_ENV: 'production', }, }; System.config(window.config); // eslint-disable-next-line const useTgzInCSB = ['openai'];
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 { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!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/25.2.3/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.9.3/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

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

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