Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
x
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;
xxxxxxxxxx
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;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
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,
}];
xxxxxxxxxx
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,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.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/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'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/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.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
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,
},
];
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#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.