Access a Series Point Using the API

NOTE
Before accessing a series point, you must gain access to its series. You can learn the details in the Access a Series Using the API topic.

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) chart: DxChartComponent;
        seriesPointCollection: any = [];
        getSeriesPoints() {
            let series = this.chart.instance.getSeriesByName("Series 1");
            this.seriesPointCollection = series.getAllPoints();
        }
    }
  • 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) chart: DxChartComponent;
        chinaPoint: any = {};
        getChinaPoints() {
            let series = this.chart.instance.getSeriesByName("Series 1");
            this.chinaPoints = series.getPointsByArg("China");
        }
    }
  • 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) chart: DxChartComponent;
        firstPoint: any = {};
        getFirstPoint() {
            let series = this.chart.instance.getSeriesByName("Series 1");
            this.firstPoint = series.getPointByPos(0);
        }
    }
  • getVisiblePoints()
    Gets those points of the series that fall into the range from min to max axis values.

    jQuery
    JavaScript
    var visiblePoints = series.getVisiblePoints();
    Angular
    TypeScript
    import { ..., ViewChild } from '@angular/core';
    import { DxChartModule, DxChartComponent } from 'devextreme-angular';
    // ...
    export class AppComponent {
        @ViewChild(DxChartComponent) chart: DxChartComponent;
        visiblePoints: any = [];
        getVisiblePoints() {
            let series = this.chart.instance.getSeriesByName("Series 1");
            this.visiblePoints = series.getVisiblePoints(0);
        }
    }

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.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        onPointClick: function (e) {
            var point = e.target;
            // ...
        }
    });
});
Angular
HTML
TypeScript
<dx-chart
    (onPointClick)="onPointClick($event)">
</dx-chart>
export class AppComponent {
    onPointClick (e) {
        let point = e.target;
        // ...
    };
}
NOTE
Each Point object contains a reference to its parent series in the series field.
See Also