React PieChart - 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.
jQuery
var series = $("#pieChartContainer").dxPieChart("getAllSeries")[0];
Angular
import { ..., ViewChild } from "@angular/core"; import { DxPieChartModule, DxPieChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent; // Prior to Angular 8 // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent; series: any = []; getSeries() { this.series = this.pieChart.instance.getAllSeries()[0]; } } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... ref="pieChart"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, data() { return { series: [] }; }, methods: { getSeries() { this.series = this.$refs.pieChart.instance.getAllSeries()[0]; } } } </script>
React
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { constructor(props) { super(props); this.pieChartRef = React.createRef(); this.series = []; this.getSeries = () => { this.series = this.pieChart.getAllSeries()[0]; }; } render() { return ( <PieChart ... ref={this.pieChartRef}> </PieChart> ); } get pieChart() { return this.pieChartRef.current.instance; } }
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.jQuery
JavaScriptvar series = $("#pieChartContainer").dxPieChart("getAllSeries")[0]; var seriesPoints = series.getAllPoints();
Angular
TypeScriptimport { ..., ViewChild } from "@angular/core"; import { DxPieChartModule, DxPieChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent; // Prior to Angular 8 // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent; seriesPoints: any = []; getSeriesPoints() { const series = this.pieChart.instance.getAllSeries()[0]; this.seriesPoints = series.getAllPoints(); } } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
App.vue<template> <DxPieChart ... ref="pieChart"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, data() { return { seriesPoints: [] }; }, methods: { getSeriesPoints() { const series = this.$refs.pieChart.instance.getAllSeries()[0]; this.seriesPoints = series.getAllPoints(); } } } </script>
React
App.jsimport React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { constructor(props) { super(props);
}this.pieChartRef = React.createRef(); this.seriesPoints = []; this.getSeriesPoints = this.getSeriesPoints.bind(this); } render() { return ( <PieChart ... ref={this.pieChartRef}> </PieChart> ); } get pieChart() { return this.pieChartRef.current.instance; } getSeriesPoints() { const series = this.pieChart.getAllSeries()[0]; this.seriesPoints = series.getAllPoints(); }
getPointsByArg(pointArg)
Gets those series points that have a specific argument.jQuery
JavaScriptvar chinaPoints = series.getPointsByArg("China");
Angular
TypeScriptimport { ..., ViewChild } from "@angular/core"; import { DxPieChartModule, DxPieChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent; // Prior to Angular 8 // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent; chinaPoints: any = []; getChinaPoints() { const series = this.pieChart.instance.getAllSeries()[0]; this.chinaPoints = series.getPointsByArg("China"); } } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
App.vue<template> <DxPieChart ... ref="pieChart"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, data() { return { chinaPoints: [] }; }, methods: { getChinaPoints() { const series = this.$refs.pieChart.instance.getAllSeries()[0]; this.chinaPoints = series.getPointsByArg("China"); } } } </script>
React
App.jsimport React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { constructor(props) { super(props);
}this.pieChartRef = React.createRef(); this.chinaPoints = []; this.getChinaPoints = this.getChinaPoints.bind(this); } render() { return ( <PieChart ... ref={this.pieChartRef}> </PieChart> ); } get pieChart() { return this.pieChartRef.current.instance; } getChinaPoints() { const series = this.pieChart.getAllSeries()[0]; this.chinaPoints = series.getPointsByArg("China"); }
getPointByPos(positionIndex)
Gets a point using its index. The index is zero-based.jQuery
JavaScriptvar firstPoint = series.getPointByPos(0);
Angular
TypeScriptimport { ..., ViewChild } from "@angular/core"; import { DxPieChartModule, DxPieChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent; // Prior to Angular 8 // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent; firstPoint: any = {}; getFirstPoint() { const series = this.pieChart.instance.getAllSeries()[0]; this.firstPoint = series.getPointByPos(0); } } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
App.vue<template> <DxPieChart ... ref="pieChart"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, data() { return { firstPoint: {} }; }, methods: { getFirstPoint() { const series = this.$refs.pieChart.instance.getAllSeries()[0]; this.firstPoint = series.getPointByPos(0); } } } </script>
React
App.jsimport React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { constructor(props) { super(props);
}this.pieChartRef = React.createRef(); this.firstPoint = {}; this.getFirstPoint = this.getFirstPoint.bind(this); } render() { return ( <PieChart ... ref={this.pieChartRef}> </PieChart> ); } get pieChart() { return this.pieChartRef.current.instance; } getFirstPoint() { const series = this.pieChart.getAllSeries()[0]; this.firstPoint = series.getPointByPos(0); }
getVisiblePoints()
Gets only visible series points.jQuery
JavaScriptvar visiblePoints = series.getVisiblePoints();
Angular
TypeScriptimport { ..., ViewChild } from "@angular/core"; import { DxPieChartModule, DxPieChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent; // Prior to Angular 8 // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent; visiblePoints: any = []; getVisiblePoints() { const series = this.pieChart.instance.getAllSeries()[0]; this.visiblePoints = series.getVisiblePoints(); } } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
App.vue<template> <DxPieChart ... ref="pieChart"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, data() { return { visiblePoints: [] }; }, methods: { getVisiblePoints() { const series = this.$refs.pieChart.instance.getAllSeries()[0]; this.visiblePoints = series.getVisiblePoints(); } } } </script>
React
App.jsimport React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { constructor(props) { super(props);
}this.pieChartRef = React.createRef(); this.visiblePoints = []; this.getVisiblePoints = this.getVisiblePoints.bind(this); } render() { return ( <PieChart ... ref={this.pieChartRef}> </PieChart> ); } get pieChart() { return this.pieChartRef.current.instance; } getVisiblePoints() { const series = this.pieChart.getAllSeries()[0]; this.visiblePoints = series.getVisiblePoints(); }
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() { $("#pieChartContainer").dxPieChart({ // ... onPointClick: function (e) { var point = e.target; // ... } }); });
Angular
<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 ], // ... })
Vue
<template> <DxPieChart ... @point-click="onPointClick"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, methods: { onPointClick(e) { let point = e.target; // ... } } } </script>
React
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... onPointClick={onPointClick}> </PieChart> ); } } function onPointClick(e) { let point = e.target; // ... }
See Also
- Access a Point Label Using the API
- 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.