DevExtreme Angular - Overview

A series is a collection of related data points.

DevExtreme HTML5 JavaScript Charts Series

The most important characteristic of a series is its type. The Chart provides over 20 series types, and all of them are described in the Series Types article. You can specify the type of a series using its type option.

HTML
TypeScript
  • <dx-chart ... >
  • <dxi-series type="bar" ... ></dxi-series>
  • </dx-chart>
  • import { DxChartModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxChartModule
  • ],
  • // ...
  • })

A single Chart can contain several series at once. In this case, the series option accepts an array of series objects. To enable a user to identify a series among others on the chart legend, specify its name.

HTML
TypeScript
  • <dx-chart ... >
  • <dxi-series type="bar" name="Men" ... ></dxi-series>
  • <dxi-series type="area" name="Women" ... ></dxi-series>
  • </dx-chart>
  • import { DxChartModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxChartModule
  • ],
  • // ...
  • })

Objects in the series array specify individual settings for series. You can also specify common settings for series using the following objects.

  • commonSeriesSettings.%seriesType% (line, bar, etc.)
    Settings for all series of a specific type.

  • commonSeriesSettings
    Settings for all series in the Chart.

Note that individual settings override type-specific settings which, in turn, override common settings.

HTML
TypeScript
  • <dx-chart ... >
  • <dxi-series ... >
  • <!-- high priority -->
  • </dxi-series>
  • <dxo-common-series-settings ... >
  • <!-- low priority -->
  • <dxo-bar>
  • <!-- middle priority -->
  • </dxo-bar>
  • </dxo-common-series-settings>
  • </dx-chart>
  • import { DxChartModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxChartModule
  • ],
  • // ...
  • })
See Also