Your search did not match any results.
Charts

Simple Array

If you do not need to populate the Chart with data from a remote server, and the data does not change frequently, then bind the component to a local JavaScript array. Pass the array to the Chart's dataSource property.

Once you assign the data source, specify the series type and its nested options: argumentField and valueField. If you specify these properties, the component can determine the object fields that indicate Chart arguments and values in the array. The default values for these properties are arg and val, respectively. You can use these data field names to structure your array as shown in this demo.

www.datahub.io
Backend API
Copy to CodeSandBox
Apply
Reset
<dx-chart id="chart" title="World Population by Decade" [dataSource]="populationData" > <dxo-legend [visible]="false"></dxo-legend> <dxi-series type="bar"></dxi-series> <dxo-argument-axis [tickInterval]="10"> <dxo-label> <dxo-format type="decimal"></dxo-format> </dxo-label> </dxo-argument-axis> </dx-chart>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxChartModule } from 'devextreme-angular'; import { Population, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service], }) export class AppComponent { populationData: Population[]; constructor(service: Service) { this.populationData = service.getPopulationData(); } } @NgModule({ imports: [ BrowserModule, DxChartModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart { height: 440px; }
import { Injectable } from '@angular/core'; export class Population { arg: number; val: number; } const populationData: Population[] = [{ arg: 1960, val: 3032019978, }, { arg: 1970, val: 3683676306, }, { arg: 1980, val: 4434021975, }, { arg: 1990, val: 5281340078, }, { arg: 2000, val: 6115108363, }, { arg: 2010, val: 6922947261, }, { arg: 2020, val: 7795000000, }]; @Injectable() export class Service { getPopulationData(): Population[] { return populationData; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.16', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16', '@angular/forms': 'npm:@angular/forms@12.2.16', '@angular/common': 'npm:@angular/common@12.2.16', '@angular/compiler': 'npm:@angular/compiler@12.2.16', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.5/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@22.1.5/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.63', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.32', 'devextreme-angular': 'npm:devextreme-angular@22.1.5', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.7.1/standalone.js', 'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.16/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@22.1.5/*/package.json', 'npm:devextreme-angular@22.1.5/ui/*/package.json', 'npm:devextreme-angular@22.1.5/package.json', 'npm:devexpress-diagram@2.1.63/package.json', 'npm:devexpress-gantt@4.1.32/package.json', ], }; System.config(window.config);
<!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/22.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.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.11.4/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/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>