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
import React from 'react';
import Chart, {
CommonSeriesSettings,
Series,
Reduction,
ArgumentAxis,
Label,
Format,
ValueAxis,
Title,
Export,
Tooltip,
} from 'devextreme-react/chart';
import { dataSource } from './data.ts';
function customizeTooltip(arg: { openValue: number, closeValue: number, highValue: number, lowValue: number }) {
return {
text: `Open: $${arg.openValue}<br/>
Close: $${arg.closeValue}<br/>
High: $${arg.highValue}<br/>
Low: $${arg.lowValue}<br/>`,
};
}
function App() {
return (
<Chart id="chart" title="Stock Price" dataSource={dataSource}>
<CommonSeriesSettings argumentField="date" type="stock" />
<Series
name="E-Mart"
openValueField="o"
highValueField="h"
lowValueField="l"
closeValueField="c"
>
<Reduction color="red" />
</Series>
<ArgumentAxis workdaysOnly={true}>
<Label format="shortDate" />
</ArgumentAxis>
<ValueAxis tickInterval={1}>
<Title text="US dollars" />
<Label>
<Format precision={0} type="currency" />
</Label>
</ValueAxis>
<Export enabled={true} />
<Tooltip
enabled={true}
customizeTooltip={customizeTooltip}
location="edge"
/>
</Chart>
);
}
export default App;
import React from 'react';
import Chart, {
CommonSeriesSettings,
Series,
Reduction,
ArgumentAxis,
Label,
Format,
ValueAxis,
Title,
Export,
Tooltip,
} from 'devextreme-react/chart';
import { dataSource } from './data.js';
function customizeTooltip(arg) {
return {
text: `Open: $${arg.openValue}<br/>
Close: $${arg.closeValue}<br/>
High: $${arg.highValue}<br/>
Low: $${arg.lowValue}<br/>`,
};
}
function App() {
return (
<Chart
id="chart"
title="Stock Price"
dataSource={dataSource}
>
<CommonSeriesSettings
argumentField="date"
type="stock"
/>
<Series
name="E-Mart"
openValueField="o"
highValueField="h"
lowValueField="l"
closeValueField="c"
>
<Reduction color="red" />
</Series>
<ArgumentAxis workdaysOnly={true}>
<Label format="shortDate" />
</ArgumentAxis>
<ValueAxis tickInterval={1}>
<Title text="US dollars" />
<Label>
<Format
precision={0}
type="currency"
/>
</Label>
</ValueAxis>
<Export enabled={true} />
<Tooltip
enabled={true}
customizeTooltip={customizeTooltip}
location="edge"
/>
</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 dataSource = [{
date: new Date(1994, 2, 1),
l: 24.00,
h: 25.00,
o: 25.00,
c: 24.875,
}, {
date: new Date(1994, 2, 2),
l: 23.625,
h: 25.125,
o: 24.00,
c: 24.875,
}, {
date: new Date(1994, 2, 3),
l: 26.25,
h: 28.25,
o: 26.75,
c: 27.00,
}, {
date: new Date(1994, 2, 4),
l: 26.50,
h: 27.875,
o: 26.875,
c: 27.25,
}, {
date: new Date(1994, 2, 7),
l: 26.375,
h: 27.50,
o: 27.375,
c: 26.75,
}, {
date: new Date(1994, 2, 8),
l: 25.75,
h: 26.875,
o: 26.75,
c: 26.00,
}, {
date: new Date(1994, 2, 9),
l: 25.75,
h: 26.75,
o: 26.125,
c: 26.25,
}, {
date: new Date(1994, 2, 10),
l: 25.75,
h: 26.375,
o: 26.375,
c: 25.875,
}, {
date: new Date(1994, 2, 11),
l: 24.875,
h: 26.125,
o: 26.00,
c: 25.375,
}, {
date: new Date(1994, 2, 14),
l: 25.125,
h: 26.00,
o: 25.625,
c: 25.75,
}, {
date: new Date(1994, 2, 15),
l: 25.875,
h: 26.625,
o: 26.125,
c: 26.375,
}, {
date: new Date(1994, 2, 16),
l: 26.25,
h: 27.375,
o: 26.25,
c: 27.25,
}, {
date: new Date(1994, 2, 17),
l: 26.875,
h: 27.25,
o: 27.125,
c: 26.875,
}, {
date: new Date(1994, 2, 18),
l: 26.375,
h: 27.125,
o: 27.00,
c: 27.125,
}, {
date: new Date(1994, 2, 21),
l: 26.75,
h: 27.875,
o: 26.875,
c: 27.75,
}, {
date: new Date(1994, 2, 22),
l: 26.75,
h: 28.375,
o: 27.50,
c: 27.00,
}, {
date: new Date(1994, 2, 23),
l: 26.875,
h: 28.125,
o: 27.00,
c: 28.00,
}, {
date: new Date(1994, 2, 24),
l: 26.25,
h: 27.875,
o: 27.75,
c: 27.625,
}, {
date: new Date(1994, 2, 25),
l: 27.50,
h: 28.75,
o: 27.75,
c: 28.00,
}, {
date: new Date(1994, 2, 28),
l: 25.75,
h: 28.25,
o: 28.00,
c: 27.25,
}, {
date: new Date(1994, 2, 29),
l: 26.375,
h: 27.50,
o: 27.50,
c: 26.875,
}, {
date: new Date(1994, 2, 30),
l: 25.75,
h: 27.50,
o: 26.375,
c: 26.25,
}, {
date: new Date(1994, 2, 31),
l: 24.75,
h: 27.00,
o: 26.50,
c: 25.25,
}];
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.7/cjs',
'devextreme-react': 'npm:devextreme-react@24.1.7/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.13/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 dataSource = [
{
date: new Date(1994, 2, 1),
l: 24.0,
h: 25.0,
o: 25.0,
c: 24.875,
},
{
date: new Date(1994, 2, 2),
l: 23.625,
h: 25.125,
o: 24.0,
c: 24.875,
},
{
date: new Date(1994, 2, 3),
l: 26.25,
h: 28.25,
o: 26.75,
c: 27.0,
},
{
date: new Date(1994, 2, 4),
l: 26.5,
h: 27.875,
o: 26.875,
c: 27.25,
},
{
date: new Date(1994, 2, 7),
l: 26.375,
h: 27.5,
o: 27.375,
c: 26.75,
},
{
date: new Date(1994, 2, 8),
l: 25.75,
h: 26.875,
o: 26.75,
c: 26.0,
},
{
date: new Date(1994, 2, 9),
l: 25.75,
h: 26.75,
o: 26.125,
c: 26.25,
},
{
date: new Date(1994, 2, 10),
l: 25.75,
h: 26.375,
o: 26.375,
c: 25.875,
},
{
date: new Date(1994, 2, 11),
l: 24.875,
h: 26.125,
o: 26.0,
c: 25.375,
},
{
date: new Date(1994, 2, 14),
l: 25.125,
h: 26.0,
o: 25.625,
c: 25.75,
},
{
date: new Date(1994, 2, 15),
l: 25.875,
h: 26.625,
o: 26.125,
c: 26.375,
},
{
date: new Date(1994, 2, 16),
l: 26.25,
h: 27.375,
o: 26.25,
c: 27.25,
},
{
date: new Date(1994, 2, 17),
l: 26.875,
h: 27.25,
o: 27.125,
c: 26.875,
},
{
date: new Date(1994, 2, 18),
l: 26.375,
h: 27.125,
o: 27.0,
c: 27.125,
},
{
date: new Date(1994, 2, 21),
l: 26.75,
h: 27.875,
o: 26.875,
c: 27.75,
},
{
date: new Date(1994, 2, 22),
l: 26.75,
h: 28.375,
o: 27.5,
c: 27.0,
},
{
date: new Date(1994, 2, 23),
l: 26.875,
h: 28.125,
o: 27.0,
c: 28.0,
},
{
date: new Date(1994, 2, 24),
l: 26.25,
h: 27.875,
o: 27.75,
c: 27.625,
},
{
date: new Date(1994, 2, 25),
l: 27.5,
h: 28.75,
o: 27.75,
c: 28.0,
},
{
date: new Date(1994, 2, 28),
l: 25.75,
h: 28.25,
o: 28.0,
c: 27.25,
},
{
date: new Date(1994, 2, 29),
l: 26.375,
h: 27.5,
o: 27.5,
c: 26.875,
},
{
date: new Date(1994, 2, 30),
l: 25.75,
h: 27.5,
o: 26.375,
c: 26.25,
},
{
date: new Date(1994, 2, 31),
l: 24.75,
h: 27.0,
o: 26.5,
c: 25.25,
},
];
<!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.7/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;
}
Open and close prices are displayed as left and right tick marks. To specify these prices, use the openValueField and closeValueField properties.
To reflect changes on the market, the Chart component compares the price of every point with the price of the previous point. The Chart paints the points whose price has decreased in a specific reduction color. To switch between high, low, open or close prices of points as sources for data comparison, use the series.reduction.level property.
Additionally, use the tooltip.contentTemplate property to declare a custom tooltip that shows prices. You can also enable the argumentAxis.workdaysOnly property to display only the work days on the argument axis.