DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Charts - 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.

Backend API
import React from 'react'; import Chart, { CommonSeriesSettings, Series, ArgumentAxis, ValueAxis, Label, Export, Legend, Tooltip, } from 'devextreme-react/chart'; import { oilPrices } from './data.ts'; function App() { return ( <Chart id="chart" dataSource={oilPrices} palette="Violet" title="Crude Oil Prices in 2005" > <Tooltip enabled={true}></Tooltip> <CommonSeriesSettings argumentField="date" type="rangebar" minBarSize={2} /> <Series rangeValue1Field="aVal1" rangeValue2Field="aVal2" name="ANS West Coast" /> <Series rangeValue1Field="tVal1" rangeValue2Field="tVal2" name="West Texas Intermediate" /> <ArgumentAxis> <Label format="month" /> </ArgumentAxis> <ValueAxis title="$ per barrel" /> <Export enabled={true} /> <Legend verticalAlignment="bottom" horizontalAlignment="center" /> </Chart> ); } export default App;
import React from 'react'; import Chart, { CommonSeriesSettings, Series, ArgumentAxis, ValueAxis, Label, Export, Legend, Tooltip, } from 'devextreme-react/chart'; import { oilPrices } from './data.js'; function App() { return ( <Chart id="chart" dataSource={oilPrices} palette="Violet" title="Crude Oil Prices in 2005" > <Tooltip enabled={true}></Tooltip> <CommonSeriesSettings argumentField="date" type="rangebar" minBarSize={2} /> <Series rangeValue1Field="aVal1" rangeValue2Field="aVal2" name="ANS West Coast" /> <Series rangeValue1Field="tVal1" rangeValue2Field="tVal2" name="West Texas Intermediate" /> <ArgumentAxis> <Label format="month" /> </ArgumentAxis> <ValueAxis title="$ per barrel" /> <Export enabled={true} /> <Legend verticalAlignment="bottom" horizontalAlignment="center" /> </Chart> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
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.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/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/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins '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.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
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, }, ];
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.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.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#chart { height: 440px; }

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.