Your search did not match any results.
Charts

Step Area

Documentation
Step area series are much like traditional area series. The primary difference is that in step area series, data points are connected by vertical and horizontal lines — resulting in a "stair step" effect.
Apply
Reset
<dx-chart id="chart" title="Australian Medal Count" [dataSource]="medalsInfo"> <dxi-series valueField="bronze" name="Bronze Medals" color="#cd7f32"></dxi-series> <dxi-series valueField="silver" name="Silver Medals" color="#c0c0c0"></dxi-series> <dxi-series valueField="gold" name="Gold Medals" color="#ffd700"></dxi-series> <dxo-common-series-settings argumentField="year" type="steparea"> <dxo-steparea> <dxo-border [visible]="false"></dxo-border> </dxo-steparea> </dxo-common-series-settings> <dxo-argument-axis [valueMarginsEnabled]="false"></dxo-argument-axis> <dxo-export [enabled]="true"></dxo-export> <dxo-legend verticalAlignment="bottom" horizontalAlignment="center"> </dxo-legend> </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 { MedalsInfo, Service } from './app.service'; @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service] }) export class AppComponent { medalsInfo: MedalsInfo[]; constructor(service: Service) { this.medalsInfo = service.getMedalsInfo(); } } @NgModule({ imports: [ BrowserModule, DxChartModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ #chart { height: 440px; width: 100%; }
import { Injectable } from '@angular/core'; export class MedalsInfo { year: number; gold: number; silver: number; bronze: number; } let medalsInfo: MedalsInfo[] = [{ year: 1896, gold: 2, silver: 0, bronze: 0 }, { year: 1900, gold: 2, silver: 0, bronze: 3 }, { year: 1904, gold: 0, silver: 0, bronze: 0 }, { year: 1908, gold: 1, silver: 2, bronze: 2 }, { year: 1912, gold: 2, silver: 2, bronze: 3 }, { year: 1916, gold: 0, silver: 0, bronze: 0 }, { year: 1920, gold: 0, silver: 2, bronze: 1 }, { year: 1924, gold: 3, silver: 1, bronze: 2 }, { year: 1928, gold: 1, silver: 2, bronze: 1 }, { year: 1932, gold: 3, silver: 1, bronze: 1 }, { year: 1936, gold: 0, silver: 0, bronze: 1 }, { year: 1940, gold: 0, silver: 0, bronze: 0 }, { year: 1944, gold: 0, silver: 0, bronze: 0 }, { year: 1948, gold: 2, silver: 6, bronze: 5 }, { year: 1952, gold: 6, silver: 2, bronze: 3 }, { year: 1956, gold: 13, silver: 8, bronze: 14 }, { year: 1960, gold: 8, silver: 8, bronze: 6 }, { year: 1964, gold: 6, silver: 2, bronze: 10 }, { year: 1968, gold: 5, silver: 7, bronze: 5 }, { year: 1972, gold: 8, silver: 7, bronze: 2 }, { year: 1976, gold: 0, silver: 1, bronze: 4 }, { year: 1980, gold: 2, silver: 2, bronze: 5 }, { year: 1984, gold: 4, silver: 8, bronze: 12 }, { year: 1988, gold: 3, silver: 6, bronze: 5 }, { year: 1992, gold: 7, silver: 9, bronze: 11 }, { year: 1996, gold: 9, silver: 9, bronze: 23 }, { year: 2000, gold: 16, silver: 25, bronze: 17 }, { year: 2004, gold: 17, silver: 16, bronze: 16 }, { year: 2008, gold: 14, silver: 15, bronze: 17 }]; @Injectable() export class Service { getMedalsInfo(): MedalsInfo[] { return medalsInfo; } }
// 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.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.5/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>