Angular 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.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];
  • }
  • }
  • }
  • </script>

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.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>
  • getPointsByArg(pointArg)
    Gets those series points that have a specific argument.

    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>
  • getPointByPos(positionIndex)
    Gets a point using its index. The index is zero-based.

    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>
  • getVisiblePoints()
    Gets only visible series points.

    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>

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.vue
  • <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>
NOTE
Each Point object contains a reference to its parent series in the series field.
See Also