All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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.

Range Series Demos

See Also