DevExtreme jQuery - Access a Series Point Using the API

To access series points, use the following methods. All of them return one or several objects whose fields and methods are described in the Point section of the API reference.

• getAllPoints()
  Gets all points of the series.

  jQuery

  JavaScript

  var series = $("#chartContainer").dxChart("getSeriesByName", "Series 1");
  var seriesPoints = series.getAllPoints();

  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;
      seriesPointCollection: any = [];
      getSeriesPoints() {
          let series = this.chart.instance.getSeriesByName("Series 1");
          this.seriesPointCollection = series.getAllPoints();
      }
  }
  @NgModule({
      imports: [
          // ...
          DxChartModule
      ],
      // ...
  })

• getPointsByArg(pointArg)
  Gets those points of the series that has a specific argument. Returns more than one point for range and financial series.

  jQuery

  JavaScript

  var seriesPoints = series.getPointsByArg("China");

  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;
      chinaPoint: any = {};
      getChinaPoints() {
          let series = this.chart.instance.getSeriesByName("Series 1");
          this.chinaPoints = series.getPointsByArg("China");
      }
  }
  @NgModule({
      imports: [
          // ...
          DxChartModule
      ],
      // ...
  })

• getPointByPos(positionIndex)
  Gets a point by its index in the series. The index is zero-based.

  jQuery

  JavaScript

  var seriesPoint = series.getPointByPos(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;
      firstPoint: any = {};
      getFirstPoint() {
          let series = this.chart.instance.getSeriesByName("Series 1");
          this.firstPoint = series.getPointByPos(0);
      }
  }
  @NgModule({
      imports: [
          // ...
          DxChartModule
      ],
      // ...
  })

• getVisiblePoints()
  Gets those points of the series that fall into the axis's visual range.

  jQuery

  JavaScript

  var visiblePoints = series.getVisiblePoints();

  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;
      visiblePoints: any = [];
      getVisiblePoints() {
          let series = this.chart.instance.getSeriesByName("Series 1");
          this.visiblePoints = series.getVisiblePoints(0);
      }
  }
  @NgModule({
      imports: [
          // ...
          DxChartModule
      ],
      // ...
  })

Apart from the API methods, you can access a series point in the event handlers. For example, the onPointClick event handler gets the clicked series point in the argument.

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

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

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

See Also

• Access a Series Using the API
• Access a Point Label Using the API
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core