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, { 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