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.

App.js
  • import React from 'react';
  • import PieChart from 'devextreme-react/pie-chart';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  • this.chartRef = React.createRef();
  • }
  • render() {
  • return (
  • <PieChart ref={this.chartRef}></PieChart>
  • );
  • }
  • get chart() {
  • return this.chartRef.current.instance();
  • }
  • getSeries () {
  • return this.chart.getAllSeries()[0];
  • }
  • }
  •  
  • export default App;

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.

    App.js
    • import React from 'react';
    • import PieChart from 'devextreme-react/pie-chart';
    •  
    • class App extends React.Component {
    • constructor(props) {
    • super(props);
    • this.chartRef = React.createRef();
    • }
    • render() {
    • return (
    • <PieChart ref={this.chartRef}></PieChart>
    • );
    • }
    • get chart() {
    • return this.chartRef.current.instance();
    • }
    • getSeries () {
    • return this.chart.getAllSeries()[0];
    • }
    • getSeriesPoints () {
    • return this.getSeries().getAllPoints();
    • }
    • }
    •  
    • export default App;
  • getPointsByArg(pointArg)
    Gets those series points that have a specific argument.

    App.js
    • import React from 'react';
    • import PieChart from 'devextreme-react/pie-chart';
    •  
    • class App extends React.Component {
    • constructor(props) {
    • super(props);
    • this.chartRef = React.createRef();
    • }
    • render() {
    • return (
    • <PieChart ref={this.chartRef}></PieChart>
    • );
    • }
    • get chart() {
    • return this.chartRef.current.instance();
    • }
    • getSeries () {
    • return this.chart.getAllSeries()[0];
    • }
    • getChinaPoints () {
    • return this.getSeries().getPointsByArg("China");
    • }
    • }
    •  
    • export default App;
  • getPointByPos(positionIndex)
    Gets a point using its index. The index is zero-based.

    App.js
    • import React from 'react';
    • import PieChart from 'devextreme-react/pie-chart';
    •  
    • class App extends React.Component {
    • constructor(props) {
    • super(props);
    • this.chartRef = React.createRef();
    • }
    • render() {
    • return (
    • <PieChart ref={this.chartRef}></PieChart>
    • );
    • }
    • get chart() {
    • return this.chartRef.current.instance();
    • }
    • getSeries () {
    • return this.chart.getAllSeries()[0];
    • }
    • getFirstPoint () {
    • return this.getSeries().getPointByPos(0);
    • }
    • }
    •  
    • export default App;
  • getVisiblePoints()
    Gets only visible series points.

    App.js
    • import React from 'react';
    • import PieChart from 'devextreme-react/pie-chart';
    •  
    • class App extends React.Component {
    • constructor(props) {
    • super(props);
    • this.chartRef = React.createRef();
    • }
    • render() {
    • return (
    • <PieChart ref={this.chartRef}></PieChart>
    • );
    • }
    • get chart() {
    • return this.chartRef.current.instance();
    • }
    • getSeries () {
    • return this.chart.getAllSeries()[0];
    • }
    • getVisiblePoints () {
    • return this.getSeries().getVisiblePoints();
    • }
    • }
    •  
    • export default App;

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.

App.js
  • 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) {
  • const point = e.target;
  • // ...
  • }
  •  
  • export default App;
NOTE
Each Point object contains a reference to its parent series in the series field.
See Also