All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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
JavaScript
var series = $("#pieChartContainer").dxPieChart("getAllSeries")[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;
    series: any = [];
    getSeries() {
        this.series = this.pieChart.instance.getAllSeries()[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];
        }
    }
}
</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];
    }
}

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.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        onPointClick: function (e) {
            var point = e.target;
            // ...
        }
    });
});
Angular
HTML
TypeScript
<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
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>
React
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