DevExtreme React - 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
    JavaScript
    var seriesCollection = $("#chartContainer").dxChart("getAllSeries");
    Angular
    TypeScript
    import { ..., ViewChild } from '@angular/core';
    import { DxChartModule, DxChartComponent } from 'devextreme-angular';
    // ...
    export class AppComponent {
        @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
    JavaScript
    var series = $("#chartContainer").dxChart("getSeriesByName", "Series 1");
    Angular
    TypeScript
    import { ..., ViewChild } from '@angular/core';
    import { DxChartModule, DxChartComponent } from 'devextreme-angular';
    // ...
    export class AppComponent {
        @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
    JavaScript
    var series = $("#chartContainer").dxChart("getSeriesByPos", 0);
    Angular
    TypeScript
    import { ..., ViewChild } from '@angular/core';
    import { DxChartModule, DxChartComponent } from 'devextreme-angular';
    // ...
    export class AppComponent {
        @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
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        onSeriesClick: function (e) {
            var series = e.target;
            // ...
        }
    });
});
Angular
HTML
TypeScript
<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