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.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.TypeScriptApp.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.
- <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
- Show and Hide a Series
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.