Range Bar
Documentation
This demo illustrates the use of the range bar series type. Range bars can be used to display value ranges corresponding to specified arguments. Data is displayed as sets of rectangular bars beginning at a specified start value and ending at a specified end value.
www.tax.state.ak.us
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>
<dx-chart
id="chart"
:data-source="oilPrices"
palette="Violet"
title="Crude Oil Prices in 2005"
>
<dx-common-series-settings
argument-field="date"
type="rangebar"
/>
<dx-series
range-value1-field="aVal1"
range-value2-field="aVal2"
name="ANS West Coast"
/>
<dx-series
range-value1-field="tVal1"
range-value2-field="tVal2"
name="West Texas Intermediate"
/>
<dx-argument-axis>
<dx-label format="month"/>
</dx-argument-axis>
<dx-value-axis title="$ per barrel"/>
<dx-export :enabled="true"/>
<dx-legend
vertical-alignment="bottom"
horizontal-alignment="center"
/>
</dx-chart>
</template>
<script>
import DxChart, {
DxCommonSeriesSettings,
DxSeries,
DxArgumentAxis,
DxValueAxis,
DxLabel,
DxExport,
DxLegend
} from 'devextreme-vue/chart';
import { oilPrices } from './data.js';
export default {
components: {
DxChart,
DxCommonSeriesSettings,
DxSeries,
DxArgumentAxis,
DxValueAxis,
DxLabel,
DxExport,
DxLegend
},
data() {
return {
oilPrices
};
}
};
</script>
<style>
#chart {
height: 440px;
}
</style>
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
components: { App },
template: '<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/19.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/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: 36,
aVal2: 43.29,
tVal1: 42.12,
tVal2: 49.91
}, {
date: new Date(2005, 1, 1),
aVal1: 40.68,
aVal2: 47.07,
tVal1: 28.33,
tVal2: 51.75
}, {
date: new Date(2005, 2, 1),
aVal1: 45.01,
aVal2: 52.77,
tVal1: 48.96,
tVal2: 56.72
}, {
date: new Date(2005, 3, 1),
aVal1: 45.99,
aVal2: 54.14,
tVal1: 49.72,
tVal2: 57.27
}, {
date: new Date(2005, 4, 1),
aVal1: 43.73,
aVal2: 49.03,
tVal1: 46.8,
tVal2: 52.07
}, {
date: new Date(2005, 5, 1),
aVal1: 49.94,
aVal2: 57.94,
tVal1: 52.54,
tVal2: 60.54
}, {
date: new Date(2005, 6, 1),
aVal1: 52.88,
aVal2: 58.98,
tVal1: 54.93,
tVal2: 61.28
}, {
date: new Date(2005, 7, 1),
aVal1: 58.81,
aVal2: 67.06,
tVal1: 60.86,
tVal2: 68.94
}, {
date: new Date(2005, 8, 1),
aVal1: 61,
aVal2: 66.72,
tVal1: 63,
tVal2: 69.47
}, {
date: new Date(2005, 9, 1),
aVal1: 57.86,
aVal2: 63.47,
tVal1: 59.76,
tVal2: 65.47
}, {
date: new Date(2005, 10, 1),
aVal1: 54.24,
aVal2: 59.98,
tVal1: 56.14,
tVal2: 61.78
}, {
date: new Date(2005, 11, 1),
aVal1: 55.22,
aVal2: 59.22,
tVal1: 57.34,
tVal2: 61.37
}];
System.config({
transpiler: 'plugin-babel',
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js',
'devextreme': 'npm:devextreme@19.2',
'devextreme-vue': 'npm:devextreme-vue@19.2',
jszip: 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.7/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devexpress-gantt': 'npm:devexpress-gantt',
'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build':
'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js'
},
meta: {
'*.vue': { loader: 'vue-loader' }
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});