DevExtreme v25.1 is now available.

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

Your search did not match any results.

Vue Charts - Stock

A stock series type displays variations in stock prices over the course of a day. You can specify the stock series type for each object in the series or specify the type in the commonSeriesSettings object for all series in the Chart. Use the commonSeriesSettings.stock object to configure properties of the Chart stock series.

In stock series, the bottom and top values of a vertical line correspond to high and low prices. Use the highValueField and lowValueField properties to specify data source fields for high and low prices.

Backend API
<template> <DxChart id="chart" :data-source="dataSource" title="Stock Price" > <DxCommonSeriesSettings argument-field="date" type="stock" /> <DxSeries name="E-Mart" open-value-field="o" high-value-field="h" low-value-field="l" close-value-field="c" > <DxReduction color="red"/> </DxSeries> <DxArgumentAxis :workdays-only="true"> <DxLabel format="shortDate"/> </DxArgumentAxis> <DxValueAxis :tick-interval="1"> <DxTitle text="US dollars"/> <DxLabel> <DxFormat :precision="0" type="currency" /> </DxLabel> </DxValueAxis> <DxExport :enabled="true"/> <DxTooltip :enabled="true" :customize-tooltip="customizeTooltip" location="edge" /> </DxChart> </template> <script setup lang="ts"> import DxChart, { DxCommonSeriesSettings, DxSeries, DxReduction, DxArgumentAxis, DxLabel, DxFormat, DxValueAxis, DxTitle, DxExport, DxTooltip, } from 'devextreme-vue/chart'; import { dataSource } from './data.ts'; const customizeTooltip = (pointInfo) => ({ text: `Open: $${pointInfo.openValue}<br/> Close: $${pointInfo.closeValue}<br/> High: $${pointInfo.highValue}<br/> Low: $${pointInfo.lowValue}<br/>`, }); </script> <style> #chart { height: 440px; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, 'openai': { 'esModule': true, }, }, paths: { 'project:': '../../../../', 'npm:': 'https://cdn.jsdelivr.net/npm/', 'bundles:': '../../../../bundles/', 'externals:': '../../../../bundles/externals/', }, map: { 'vue': 'npm:vue@3.4.27/dist/vue.esm-browser.js', '@vue/shared': 'npm:@vue/shared@3.4.27/dist/shared.cjs.prod.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.2/index.js', 'demo-ts-loader': 'project:utils/demo-ts-loader.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'svg-loader': 'project:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.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@25.1.3/cjs', 'devextreme-vue': 'npm:devextreme-vue@25.1.3/cjs', 'devextreme-quill': 'npm:devextreme-quill@1.7.3/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.19/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.62/dist/dx-gantt.js', 'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@8.2.3/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', '@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js', '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-vue': { main: 'index.js', }, 'devextreme-vue/common': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/common/core/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
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, }];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!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/25.1.3/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

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.