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.

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

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.

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