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="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
App.js
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
    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() {
            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.js
    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.seriesPoints = [];
    
        this.getSeriesPoints = this.getSeriesPoints.bind(this);
    }
    
    render() {
        return (
            &lt;PieChart ...
                ref={this.pieChartRef}&gt;
            &lt;/PieChart&gt;
        );
    }
    
    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
    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() {
            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.js
    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.chinaPoints = [];
    
        this.getChinaPoints = this.getChinaPoints.bind(this);
    }
    
    render() {
        return (
            &lt;PieChart ...
                ref={this.pieChartRef}&gt;
            &lt;/PieChart&gt;
        );
    }
    
    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
    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() {
            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.js
    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.firstPoint = {};
    
        this.getFirstPoint = this.getFirstPoint.bind(this);
    }
    
    render() {
        return (
            &lt;PieChart ...
                ref={this.pieChartRef}&gt;
            &lt;/PieChart&gt;
        );
    }
    
    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
    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() {
            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.js
    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.visiblePoints = [];
    
        this.getVisiblePoints = this.getVisiblePoints.bind(this);
    }
    
    render() {
        return (
            &lt;PieChart ...
                ref={this.pieChartRef}&gt;
            &lt;/PieChart&gt;
        );
    }
    
    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
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) {
            let 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) {
    let point = e.target;
    // ...
}
NOTE
Each Point object contains a reference to its parent series in the series field.
See Also