All docs
V20.2
21.1 (CTP)
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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, { static: false }) chart: DxChartComponent;
        // Prior to Angular 8
        // @ViewChild(DxChartComponent) chart: DxChartComponent;
        getAllSeries() {
            return this.chart.instance.getAllSeries();
        }
    }
    @NgModule({
        imports: [
            // ...
            DxChartModule
        ],
        // ...
    })
    Vue
    App.vue
    <template> 
        <DxChart ref="chart">
        </DxChart>
    </template>
    
    <script>
    import DxChart from 'devextreme-vue/chart';
    
    export default {
        components: {
            DxChart
        },
        methods: {
            getAllSeries () {
                return this.$refs.chart.instance.getAllSeries();
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import Chart from 'devextreme-react/chart';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.chartRef = React.createRef();
        }
        render() {
            return (
                <Chart ref={this.chartRef}></Chart>
            );
        }
        get chart() {
            return this.chartRef.current.instance;
        }
        getAllSeries () {
            return this.chart.getAllSeries();
        }
    }
    
    export default App;
  • 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, { static: false }) chart: DxChartComponent;
        // Prior to Angular 8
        // @ViewChild(DxChartComponent) chart: DxChartComponent;
        getSeriesByName(seriesName) {
            return this.chart.instance.getSeriesByName(seriesName);
        }
    }
    @NgModule({
        imports: [
            // ...
            DxChartModule
        ],
        // ...
    })
    Vue
    App.vue
    <template> 
        <DxChart ref="chart">
        </DxChart>
    </template>
    
    <script>
    import DxChart from 'devextreme-vue/chart';
    
    export default {
        components: {
            DxChart
        },
        methods: {
            getSeriesByName (seriesName) {
                return this.$refs.chart.instance.getSeriesByName(seriesName);
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import Chart from 'devextreme-react/chart';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.chartRef = React.createRef();
        }
        render() {
            return (
                <Chart ref={this.chartRef}></Chart>
            );
        }
        get chart() {
            return this.chartRef.current.instance;
        }
        getSeriesByName (seriesName) {
            return this.chart.getSeriesByName(seriesName);
        }
    }
    
    export default App;
  • 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
    App.vue
    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
        ],
        // ...
    })
    
    ##### Vue
    <template> 
        <DxChart ref="chart">
        </DxChart>
    </template>
    
    <script>
    import DxChart from 'devextreme-vue/chart';
    
    export default {
        components: {
            DxChart
        },
        methods: {
            getSeriesByPos(seriesIndex) {
                return this.$refs.chart.instance.getSeriesByPos(seriesIndex);
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import Chart from 'devextreme-react/chart';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.chartRef = React.createRef();
        }
        render() {
            return (
                <Chart ref={this.chartRef}></Chart>
            );
        }
        get chart() {
            return this.chartRef.current.instance;
        }
        getSeriesByPos(seriesIndex) {
            return this.chart.getSeriesByPos(seriesIndex);
        }
    }
    
    export default App;

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
App.vue
App.js
<dx-chart
    (onSeriesClick)="onSeriesClick($event)">
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onSeriesClick (e) {
        let series = e.target;
        // ...
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

##### Vue
    <template> 
        <DxChart @series-click="onSeriesClick">
        </DxChart>
    </template>

    <script>
    import DxChart from 'devextreme-vue/chart';

    export default {
        components: {
            DxChart
        },
        methods: {
            onSeriesClick (e) {
                const series = e.target;
                // ...
            }
        }
    }
    </script>

##### React
    import React from 'react';
    import Chart from 'devextreme-react/chart';

    class App extends React.Component {
        render() {
            return (
                <Chart onSeriesClick={onSeriesClick}>
                </Chart>
            );
        }
    }

    function onSeriesClick (e) {
        const series = e.target;
        // ...
    }

    export default App;

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