React Chart - 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.TypeScript- import { ..., 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;
- getAllSeries() {
- return this.chart.instance.getAllSeries();
- }
- }
- @NgModule({
- imports: [
- // ...
- DxChartModule
- ],
- // ...
- })
getSeriesByName(seriesName)
Gets a series by its name.TypeScript- import { ..., 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;
- getSeriesByName(seriesName) {
- return this.chart.instance.getSeriesByName(seriesName);
- }
- }
- @NgModule({
- imports: [
- // ...
- DxChartModule
- ],
- // ...
- })
getSeriesByPos(seriesIndex)
Gets a series by its index in the series array. The index is zero-based.TypeScript- import { ..., 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;
- getSeriesByPos(seriesIndex) {
- return this.chart.instance.getSeriesByPos(seriesIndex);
- }
- }
- @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.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.