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.
- <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.
- <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>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.