Your search did not match any results.
Charts

Stock

Documentation
Stock series help display variations in stock prices over the course of a day. High and low prices are represented by the bottom and top values of the vertical line and open and close prices are represented by left and right tick marks.
Apply
Reset
<dx-chart id="chart" title="Stock Price" [dataSource]="stockPrices"> <dxi-series name="DELL" openValueField="o" highValueField="h" lowValueField="l" closeValueField="c"> <dxo-reduction color="red"></dxo-reduction> </dxi-series> <dxo-common-series-settings argumentField="date" type="stock"> </dxo-common-series-settings> <dxi-value-axis [tickInterval]="1"> <dxo-title text="US dollars"></dxo-title> <dxo-label> <dxo-format type="currency" [precision]="0"> </dxo-format> </dxo-label> </dxi-value-axis> <dxo-argument-axis> <dxo-label format="shortDate"></dxo-label> </dxo-argument-axis> <dxo-export [enabled]="true"></dxo-export> <dxo-tooltip [enabled]="true" location="edge" [customizeTooltip]="customizeTooltip"> </dxo-tooltip> </dx-chart>
import { NgModule, Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxChartModule } from 'devextreme-angular'; import { StockPrice, Service } from './app.service'; @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service] }) export class AppComponent { stockPrices: StockPrice[]; constructor(service: Service) { this.stockPrices = service.getStockPrices(); } customizeTooltip(arg) { return { text: "Open: $" + arg.openValue + "<br/>" + "Close: $" + arg.closeValue + "<br/>" + "High: $" + arg.highValue + "<br/>" + "Low: $" + arg.lowValue + "<br/>" }; } } @NgModule({ imports: [ BrowserModule, DxChartModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ #chart { height: 440px; }
import { Injectable } from '@angular/core'; export class StockPrice { date: Date; l: number; h: number; o: number; c: number; } let stockPrices: StockPrice[] = [{ 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 }]; @Injectable() export class Service { getStockPrices(): StockPrice[] { return stockPrices; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular 2 and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js', 'typescript': 'npm:typescript@2.0.6/lib/typescript.js', '@angular/core': 'npm:@angular/core@2.4.3/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@2.4.3/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@2.4.3/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@2.4.3/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.3/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@2.4.3/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@3.4.3/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@2.4.3/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.0.3', 'devextreme': 'npm:devextreme@16.2', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@16.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>