If you have technical questions, please create a support ticket in the DevExpress Support Center.
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;
xxxxxxxxxx
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;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
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,
}];
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 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,
},
];
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;
}
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.