DevExtreme Angular - Access a Point Using the API

Before accessing a series point, gain access to its series by calling the getAllSeries() method. You can call the getSeriesByName(seriesName) or getSeriesByPos(seriesIndex) method as an alternative for multi-series PieCharts.

TypeScript
  • import { ..., ViewChild } from '@angular/core';
  • import { DxPieChartModule, DxPieChartComponent } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
  • series: any = [];
  • getSeries() {
  • this.series = this.pieChart.instance.getAllSeries()[0];
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })

Use the following methods to access series points. All of them return one or several objects whose fields and methods are described in the API reference's Point section.

  • getAllPoints()
    Gets all the series points.

    TypeScript
    • import { ..., ViewChild } from '@angular/core';
    • import { DxPieChartModule, DxPieChartComponent } from 'devextreme-angular';
    • // ...
    • export class AppComponent {
    • @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
    • seriesPoints: any = [];
    • getSeriesPoints() {
    • let series = this.pieChart.instance.getAllSeries()[0];
    • this.seriesPoints = series.getAllPoints();
    • }
    • }
    • @NgModule({
    • imports: [
    • // ...
    • DxPieChartModule
    • ],
    • // ...
    • })
  • getPointsByArg(pointArg)
    Gets those series points that have a specific argument.

    TypeScript
    • import { ..., ViewChild } from '@angular/core';
    • import { DxPieChartModule, DxPieChartComponent } from 'devextreme-angular';
    • // ...
    • export class AppComponent {
    • @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
    • chinaPoints: any = {};
    • getChinaPoints() {
    • let series = this.pieChart.instance.getAllSeries()[0];
    • this.chinaPoints = series.getPointsByArg("China");
    • }
    • }
    • @NgModule({
    • imports: [
    • // ...
    • DxPieChartModule
    • ],
    • // ...
    • })
  • getPointByPos(positionIndex)
    Gets a point using its index. The index is zero-based.

    TypeScript
    • import { ..., ViewChild } from '@angular/core';
    • import { DxPieChartModule, DxPieChartComponent } from 'devextreme-angular';
    • // ...
    • export class AppComponent {
    • @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
    • firstPoint: any = {};
    • getFirstPoint() {
    • let series = this.pieChart.instance.getAllSeries()[0];
    • this.firstPoint = series.getPointByPos(0);
    • }
    • }
    • @NgModule({
    • imports: [
    • // ...
    • DxPieChartModule
    • ],
    • // ...
    • })
  • getVisiblePoints()
    Gets only visible series points.

    TypeScript
    • import { ..., ViewChild } from '@angular/core';
    • import { DxPieChartModule, DxPieChartComponent } from 'devextreme-angular';
    • // ...
    • export class AppComponent {
    • @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
    • visiblePoints: any = [];
    • getVisiblePoints() {
    • let series = this.pieChart.instance.getAllSeries()[0];
    • this.visiblePoints = series.getVisiblePoints();
    • }
    • }
    • @NgModule({
    • imports: [
    • // ...
    • DxPieChartModule
    • ],
    • // ...
    • })

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.

HTML
TypeScript
  • <dx-pie-chart
  • (onPointClick)="onPointClick($event)">
  • </dx-pie-chart>
  • import { DxPieChartModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • onPointClick (e) {
  • let point = e.target;
  • // ...
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })
NOTE
Each Point object contains a reference to its parent series in the series field.
See Also