JavaScript/jQuery 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.

  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

  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

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

$(function() {
    $("#chartContainer").dxChart({
        // ...
        onSeriesClick: function (e) {
            var series = e.target;
            // ...
        }
    });
});

<dx-chart
    (onSeriesClick)="onSeriesClick($event)">
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onSeriesClick (e) {
        let series = e.target;
        // ...
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

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

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

• Show and Hide a Series