DevExtreme Vue - 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
JavaScriptvar series = $("#chartContainer").dxChart("getSeriesByName", "Series 1"); var seriesPoints = series.getAllPoints();
Angular
TypeScriptimport { ..., 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(); } } @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
JavaScriptvar seriesPoints = series.getPointsByArg("China");
Angular
TypeScriptimport { ..., 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"); } } @NgModule({ imports: [ // ... DxChartModule ], // ... })
getPointByPos(positionIndex)
Gets a point by its index in the series. The index is zero-based.jQuery
JavaScriptvar seriesPoint = series.getPointByPos(0);
Angular
TypeScriptimport { ..., 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); } } @NgModule({ imports: [ // ... DxChartModule ], // ... })
getVisiblePoints()
Gets those points of the series that fall into the range from min to max axis values.jQuery
JavaScriptvar visiblePoints = series.getVisiblePoints();
Angular
TypeScriptimport { ..., 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); } } @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.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... onPointClick: function (e) { var point = e.target; // ... } }); });
Angular
<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: jQuery | Angular | AngularJS | Knockout | Vue | React | ASP.NET MVC
If you have technical questions, please create a support ticket in the DevExpress Support Center.