Range Bar
This demo illustrates the range bar series type.
You can use range bars to display value ranges that correspond to specified arguments. Each point in a range bar series has one argument and two values. The argumentField supplies arguments while the rangeValue1Field and rangeValue2Field supply bar start and end point values.
To create multiple range bar series, use the series array to declare each series and the commonSeriesSettings object to specify the common series type. In this object, you can implement parameters specific to the range bar series type. For example, this demo specifies a minimum bar size for all series.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<DxChart
id="chart"
:data-source="oilPrices"
palette="Violet"
title="Crude Oil Prices in 2005"
>
<DxCommonSeriesSettings
argument-field="date"
type="rangebar"
:min-bar-size="2"
/>
<DxSeries
range-value1-field="aVal1"
range-value2-field="aVal2"
name="ANS West Coast"
/>
<DxSeries
range-value1-field="tVal1"
range-value2-field="tVal2"
name="West Texas Intermediate"
/>
<DxTooltip
:enabled="true"
/>
<DxArgumentAxis>
<DxLabel format="month"/>
</DxArgumentAxis>
<DxValueAxis title="$ per barrel"/>
<DxExport :enabled="true"/>
<DxLegend
vertical-alignment="bottom"
horizontal-alignment="center"
/>
</DxChart>
</template>
<script>
import DxChart, {
DxCommonSeriesSettings,
DxSeries,
DxArgumentAxis,
DxValueAxis,
DxLabel,
DxExport,
DxLegend,
DxTooltip,
} from 'devextreme-vue/chart';
import { oilPrices } from './data.js';
export default {
components: {
DxChart,
DxCommonSeriesSettings,
DxSeries,
DxArgumentAxis,
DxValueAxis,
DxLabel,
DxExport,
DxLegend,
DxTooltip,
},
data() {
return {
oilPrices,
};
},
};
</script>
<style>
#chart {
height: 440px;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
export const oilPrices = [{
date: new Date(2005, 0, 1),
aVal1: 34.33,
aVal2: 43.29,
tVal1: 40.18,
tVal2: 49.91,
}, {
date: new Date(2005, 1, 1),
aVal1: 42.24,
aVal2: 47.07,
tVal1: 29.65,
tVal2: 51.75,
}, {
date: new Date(2005, 2, 1),
aVal1: 42.93,
aVal2: 52.77,
tVal1: 51.01,
tVal2: 56.72,
}, {
date: new Date(2005, 3, 1),
aVal1: 44.24,
aVal2: 54.14,
tVal1: 48.06,
tVal2: 57.27,
}, {
date: new Date(2005, 4, 1),
aVal1: 44.47,
aVal2: 49.03,
tVal1: 47.28,
tVal2: 52.07,
}, {
date: new Date(2005, 5, 1),
aVal1: 50.55,
aVal2: 57.94,
tVal1: 55.01,
tVal2: 60.54,
}, {
date: new Date(2005, 6, 1),
aVal1: 52.79,
aVal2: 58.98,
tVal1: 55.52,
tVal2: 61.28,
}, {
date: new Date(2005, 7, 1),
aVal1: 56.49,
aVal2: 67.06,
tVal1: 62.23,
tVal2: 68.94,
}, {
date: new Date(2005, 8, 1),
aVal1: 62.77,
aVal2: 66.72,
tVal1: 65.19,
tVal2: 69.47,
}, {
date: new Date(2005, 9, 1),
aVal1: 57.52,
aVal2: 63.47,
tVal1: 59.35,
tVal2: 65.47,
}, {
date: new Date(2005, 10, 1),
aVal1: 52.92,
aVal2: 59.98,
tVal1: 56.15,
tVal2: 61.78,
}, {
date: new Date(2005, 11, 1),
aVal1: 55.22,
aVal2: 55.22,
tVal1: 57.34,
tVal2: 57.37,
}];
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.41/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.3/cjs',
'devextreme-vue': 'npm:devextreme-vue@22.2.3',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.65/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.37/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.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.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);