JavaScript/jQuery Chart - 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 Demo

See Also