DevExtreme Angular - Access a Series Using the API
The Chart exposes the following methods for accessing a series. All of them return one or several objects whose fields and methods are described in the Series section of the API reference.
getAllSeries()
Gets all series of the Chart.jQuery
JavaScriptvar seriesCollection = $("#chartContainer").dxChart("getAllSeries");
Angular
TypeScriptimport { ..., ViewChild } from "@angular/core"; import { DxChartModule, DxChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent; // Prior to Angular 8 // @ViewChild(DxChartComponent) chart: DxChartComponent; seriesCollection: any = []; getAllSeries() { this.seriesCollection = this.chart.instance.getAllSeries(); } } @NgModule({ imports: [ // ... DxChartModule ], // ... })
getSeriesByName(seriesName)
Gets a series by its name.jQuery
JavaScriptvar series = $("#chartContainer").dxChart("getSeriesByName", "Series 1");
Angular
TypeScriptimport { ..., ViewChild } from "@angular/core"; import { DxChartModule, DxChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent; // Prior to Angular 8 // @ViewChild(DxChartComponent) chart: DxChartComponent; series: any = {}; getSeries() { this.series = this.chart.instance.getSeriesByName("Series 1"); } } @NgModule({ imports: [ // ... DxChartModule ], // ... })
getSeriesByPos(seriesIndex)
Gets a series by its index in the series array. The index is zero-based.jQuery
JavaScriptvar series = $("#chartContainer").dxChart("getSeriesByPos", 0);
Angular
TypeScriptimport { ..., ViewChild } from "@angular/core"; import { DxChartModule, DxChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent; // Prior to Angular 8 // @ViewChild(DxChartComponent) chart: DxChartComponent; series: any = {}; getSeries() { this.series = this.chart.instance.getSeriesByPos(0); } } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Apart from the API methods, you can access a series in the event handlers. For example, the onSeriesClick event handler gets the clicked series in the argument.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... onSeriesClick: function (e) { var series = e.target; // ... } }); });
Angular
<dx-chart (onSeriesClick)="onSeriesClick($event)"> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { onSeriesClick (e) { let series = e.target; // ... }; } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Once you get the series, you can access its child points. For further information, refer to the Access a Series Point Using the API topic.
See Also
- Show and Hide a Series
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.