JavaScript/jQuery 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.

var series = $("#pieChartContainer").dxPieChart("getAllSeries")[0];

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
    ],
    // ...
})

<template> 
    <DxPieChart ref="chart">
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },
    computed: {
        series: function() {
            return this.$refs.chart.instance.getAllSeries()[0];
        }
    }
}
</script>

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.

  jQuery

  JavaScript

  var series = $("#pieChartContainer").dxPieChart("getAllSeries")[0];
  var seriesPoints = series.getAllPoints();

  Angular

  TypeScript

  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;
      seriesPoints: any = [];
      getSeriesPoints() {
          let series = this.pieChart.instance.getAllSeries()[0];
          this.seriesPoints = series.getAllPoints();
      }
  }
  @NgModule({
      imports: [
          // ...
          DxPieChartModule
      ],
      // ...
  })

  Vue

  App.vue

  <template> 
      <DxPieChart ref="chart">
      </DxPieChart>
  </template>
  
  <script>
  import DxPieChart from 'devextreme-vue/pie-chart';
  
  export default {
      components: {
          DxPieChart
      },
      computed: {
          series: function () {
              return this.$refs.chart.instance.getAllSeries()[0];
          },
          seriesPoints: function () {
              return this.series.getAllPoints();
          }
      }
  }
  </script>

  React

  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.

  jQuery

  JavaScript

  var chinaPoints = series.getPointsByArg("China");

  Angular

  TypeScript

  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;
      chinaPoints: any = {};
      getChinaPoints() {
          let series = this.pieChart.instance.getAllSeries()[0];
          this.chinaPoints = series.getPointsByArg("China");
      }
  }
  @NgModule({
      imports: [
          // ...
          DxPieChartModule
      ],
      // ...
  })

  Vue

  App.vue

  <template> 
      <DxPieChart ref="chart">
      </DxPieChart>
  </template>
  
  <script>
  import DxPieChart from 'devextreme-vue/pie-chart';
  
  export default {
      components: {
          DxPieChart
      },
      computed: {
          series: function () {
              return this.$refs.chart.instance.getAllSeries()[0];
          },
          chinaPoints: function () {
              return this.series.getPointsByArg("China");
          }
      }
  }
  </script>

  React

  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.

  jQuery

  JavaScript

  var firstPoint = series.getPointByPos(0);

  Angular

  TypeScript

  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;
      firstPoint: any = {};
      getFirstPoint() {
          let series = this.pieChart.instance.getAllSeries()[0];
          this.firstPoint = series.getPointByPos(0);
      }
  }
  @NgModule({
      imports: [
          // ...
          DxPieChartModule
      ],
      // ...
  })

  Vue

  App.vue

  <template> 
      <DxPieChart ref="chart">
      </DxPieChart>
  </template>
  
  <script>
  import DxPieChart from 'devextreme-vue/pie-chart';
  
  export default {
      components: {
          DxPieChart
      },
      computed: {
          series: function () {
              return this.$refs.chart.instance.getAllSeries()[0];
          },
          firstPoint: function () {
              return this.series.getPointByPos(0);
          }
      }
  }
  </script>

  React

  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.

  jQuery

  JavaScript

  var visiblePoints = series.getVisiblePoints();

  Angular

  TypeScript

  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;
      visiblePoints: any = [];
      getVisiblePoints() {
          let series = this.pieChart.instance.getAllSeries()[0];
          this.visiblePoints = series.getVisiblePoints();
      }
  }
  @NgModule({
      imports: [
          // ...
          DxPieChartModule
      ],
      // ...
  })

  Vue

  App.vue

  <template> 
      <DxPieChart ref="chart">
      </DxPieChart>
  </template>
  
  <script>
  import DxPieChart from 'devextreme-vue/pie-chart';
  
  export default {
      components: {
          DxPieChart
      },
      computed: {
          series: function () {
              return this.$refs.chart.instance.getAllSeries()[0];
          },
          visiblePoints: function () {
              return this.series.getVisiblePoints();
          }
      }
  }
  </script>

  React

  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.

$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        onPointClick: function (e) {
            var point = e.target;
            // ...
        }
    });
});

<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
    ],
    // ...
})

<template> 
    <DxPieChart @point-click="onPointClick">
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },
    methods: {
        onPointClick (e) {
            const point = e.target;
            // ...
        }
    }
}
</script>

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;

See Also

• Access a Point Label Using the API
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout