DevExtreme v24.1 is now available.

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

Your search did not match any results.

Dynamic Series from the DataSource

In certain scenarios, you may need to add more series to the data source after you created the Chart.

In this case, arrange your data source structure as follows:

[
    {seriesName: series1, arg: arg11Value, val: value11 }
    {seriesName: series1, arg: arg12Value, val: value12 }
    ...
    {seriesName: seriesM, arg: argM1Value, val: valueM1 }
    {seriesName: seriesM, arg: argM2Value, val: valueM2 }
    ...
]

Every object in the data source should correspond to a point in a single series.

Backend API
<dx-chart id="chart" [dataSource]="productionData" palette="violet"> <dxo-common-series-settings argumentField="country" type="bar" valueField="oil" > </dxo-common-series-settings> <dxo-series-template nameField="year" [customizeSeries]="customizeSeries"> </dxo-series-template> <dxo-title text="Oil Production"> <dxo-subtitle text="(in millions tonnes)"></dxo-subtitle> </dxo-title> <dxo-legend verticalAlignment="bottom" horizontalAlignment="center"> </dxo-legend> <dxo-export [enabled]="true"></dxo-export> </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 { Service, Production } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: `app/app.component.html`, styleUrls: [`app/app.component.css`], }) export class AppComponent { productionData: Production[]; constructor(service: Service) { this.productionData = service.getProductionData(); } customizeSeries(valueFromNameField: number) { return valueFromNameField === 2009 ? { type: 'line', label: { visible: true }, color: '#ff3f7a' } : {}; } } @NgModule({ imports: [ BrowserModule, DxChartModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart { height: 440px; width: 100%; }
import { Injectable } from '@angular/core'; export class Production { year: number; country: string; oil: number; } const productionData: Production[] = [{ year: 1970, country: 'Saudi Arabia', oil: 186.7, }, { year: 1970, country: 'USA', oil: 557.8, }, { year: 1970, country: 'Iran', oil: 207.3, }, { year: 1970, country: 'Mexico', oil: 24.7, }, { year: 1980, country: 'Saudi Arabia', oil: 480.4, }, { year: 1980, country: 'USA', oil: 423.2, }, { year: 1980, country: 'Iran', oil: 74.3, }, { year: 1980, country: 'Mexico', oil: 109.2, }, { year: 1990, country: 'Saudi Arabia', oil: 319.6, }, { year: 1990, country: 'USA', oil: 340.1, }, { year: 1990, country: 'Iran', oil: 183.3, }, { year: 1990, country: 'Mexico', oil: 145.3, }, { year: 1990, country: 'Russia', oil: 499.6, }, { year: 2000, country: 'Saudi Arabia', oil: 465, }, { year: 2000, country: 'USA', oil: 282.9, }, { year: 2000, country: 'Iran', oil: 195.5, }, { year: 2000, country: 'Mexico', oil: 148.3, }, { year: 2000, country: 'Russia', oil: 375.3, }, { year: 2008, country: 'Saudi Arabia', oil: 549.7, }, { year: 2008, country: 'USA', oil: 280, }, { year: 2008, country: 'Iran', oil: 214.9, }, { year: 2008, country: 'Mexico', oil: 132.1, }, { year: 2008, country: 'Russia', oil: 503.2, }, { year: 2009, country: 'Saudi Arabia', oil: 428.4, }, { year: 2009, country: 'USA', oil: 298.9, }, { year: 2009, country: 'Iran', oil: 217.2, }, { year: 2009, country: 'Mexico', oil: 121.6, }, { year: 2009, country: 'Russia', oil: 493.1, }]; @Injectable() export class Service { getProductionData(): Production[] { return productionData; } }
// 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/ const componentNames = [ 'accordion', 'action-sheet', 'autocomplete', 'bar-gauge', 'box', 'bullet', 'button-group', 'button', 'calendar', 'chart', 'check-box', 'circular-gauge', 'color-box', 'context-menu', 'data-grid', 'date-box', 'date-range-box', 'defer-rendering', 'diagram', 'draggable', 'drawer', 'drop-down-box', 'drop-down-button', 'file-manager', 'file-uploader', 'filter-builder', 'form', 'funnel', 'gallery', 'gantt', 'html-editor', 'linear-gauge', 'list', 'load-indicator', 'load-panel', 'lookup', 'map', 'menu', 'multi-view', 'nested', 'number-box', 'pie-chart', 'pivot-grid-field-chooser', 'pivot-grid', 'polar-chart', 'popover', 'popup', 'progress-bar', 'radio-group', 'range-selector', 'range-slider', 'recurrence-editor', 'resizable', 'responsive-box', 'sankey', 'scheduler', 'scroll-view', 'select-box', 'slider', 'sortable', 'sparkline', 'speed-dial-action', 'splitter', 'switch', 'tab-panel', 'tabs', 'tag-box', 'text-area', 'text-box', 'tile-view', 'toast', 'toolbar', 'tooltip', 'tree-list', 'tree-map', 'tree-view', 'validation-group', 'validation-summary', 'validator', 'vector-map', ]; window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, '@angular/platform-browser-dynamic': { 'esModule': true, }, '@angular/platform-browser': { 'esModule': true, }, '@angular/core': { 'esModule': true, }, '@angular/common': { 'esModule': true, }, '@angular/common/http': { 'esModule': true, }, '@angular/compiler': { 'esModule': true, }, '@angular/animations': { 'esModule': true, }, '@angular/forms': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', 'bundles:': '../../../../bundles/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', /* @angular */ '@angular/compiler': 'bundles:@angular/compiler.umd.js', '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js', '@angular/core': 'bundles:@angular/core.umd.js', '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js', '@angular/common': 'bundles:@angular/common.umd.js', '@angular/common/http': 'bundles:@angular/common-http.umd.js', '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js', '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js', '@angular/forms': 'bundles:@angular/forms.umd.js', /* devextreme */ 'devextreme': 'npm:devextreme@24.1.4/cjs', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'devextreme/bundles/dx.all': 'npm:devextreme@24.1.4/bundles/dx.all.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.10', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56', /* devextreme-angular umd maps */ 'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js', 'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js', ...componentNames.reduce((acc, name) => { acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`; return acc; }, {}), 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'tslib': 'npm:tslib@2.6.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.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', '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@7.4.11/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', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/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.13/inferno/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devexpress-diagram@2.2.10/package.json', 'npm:devexpress-gantt@4.1.56/package.json', ], }; System.config(window.config); // System.import('@angular/compiler').catch(console.error.bind(console));
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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/24.1.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.13.0/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/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>

This demo uses the structure displayed above to organize data:

{
    year: 1970,
    country: 'Saudi Arabia',
    oil: 192.2,
}

To define series, use the commonSeriesSettings object to specify common settings for all series: the argumentField, the valueField, and the type.

Then, use the seriesTemplate configuration object to define a template for the series. Within this object, assign the data source field that specifies the series name to the nameField property.

If you need to specify individual values for properties of a particular series, assign a callback function to the customizeSeries property of the seriesTemplate object. This demo uses the customizeSeries function to display a line instead of a bar for year: 2009.