Range Series
Range Area and Range Bar series emphasize the difference between a point's high and low value using a shaded area or a set of bars respectively.
Assign "rangearea" or "rangebar" to the series[].type property to specify the corresponding series type. You can configure:
- Each series individually using the series array;
- All series in the Chart using the commonSeriesSettings object;
- All Range Area or Range Bar series using the commonSeriesSettings.rangearea or commonSeriesSettings.rangebar object respectively.
Note that the range series require two value fields: rangeValue1Field and rangeValue2Field.
jQuery
JavaScript
$(function () {
$("#chartContainer").dxChart({
series: [{
type: "rangearea",
rangeValue1Field: "low",
rangeValue2Field: "high"
}, {
// ...
}],
commonSeriesSettings: {
rangearea: { ... },
rangebar: { ... }
}
});
});Angular
HTML
TypeScript
<dx-chart ... >
<dxi-series
type="rangearea"
rangeValue1Field="low"
rangeValue2Field="high">
</dxi-series>
<dxi-series ... ></dxi-series>
...
<dxo-common-series-settings>
<dxo-rangearea ... ></dxo-rangearea>
<dxo-rangebar ... ></dxo-rangebar>
</dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Vue
App.vue
<template>
<DxChart ... >
<DxSeries
type="rangearea"
range-value1-field="low"
range-value2-field="high"
/>
<DxSeries ... />
...
<DxCommonSeriesSettings
:rangearea="rangeAreaSettings"
:rangebar="rangeBarSettings"
/>
</DxChart>
</template>
<script>
import DxChart, {
DxSeries,
DxCommonSeriesSettings
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxSeries,
DxCommonSeriesSettings
},
data() {
return {
rangeAreaSettings: { ... },
rangeBarSettings: { ... }
};
}
}
</script>React
App.js
import React from 'react';
import Chart, {
Series,
CommonSeriesSettings
} from 'devextreme-react/chart';
const rangeAreaSettings = { ... };
const rangeBarSettings = { ... };
class App extends React.Component {
render() {
return (
<Chart ... >
<Series
type="rangearea"
rangeValue1Field="low"
rangeValue2Field="high"
/>
<Series ... />
...
<CommonSeriesSettings
rangearea={rangeAreaSettings}
rangebar={rangeBarSettings}
/>
</Chart>
);
}
}
export default App;See the RangeAreaSeries and RangeBarSeries API Reference sections for a full list of properties available to a range series.
See Also
Feedback