React PieChart - Access a Label Using the API

NOTE
Before accessing a point label, you must gain access to its series point. You can learn the details in the Access a Point Using the API topic.

To access a point label, call the getLabel() method of its series point. This method returns an object described in the Label section of the API reference.

jQuery
JavaScript
var series = $("#pieChartContainer").dxPieChart("getAllSeries")[0];
var seriesPoints = series.getAllPoints();
var label = seriesPoints[0].getLabel();
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;
    label: any = {};
    getPointLabel () {
        const series = this.pieChart.instance.getAllSeries()[0];
        const seriesPoints = series.getAllPoints();
        this.label = seriesPoints[0].getLabel();
    }
}
@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 {
            label: {}
        };
    },
    methods: {
        getPointLabel() {
            const series = this.$refs.pieChart.instance.getAllSeries()[0];
            const seriesPoints = series.getAllPoints();
            this.label = seriesPoints[0].getLabel();
        }
    }
}
</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.label = {};

        this.getPointLabel = this.getPointLabel.bind(this);
    }

    render() {
        return (
            <PieChart ...
                ref={this.pieChartRef}>
            </PieChart>
        );
    }

    get pieChart() {
        return this.pieChartRef.current.instance();
    }

    getPointLabel() {
        const series = this.pieChart.getAllSeries()[0];
        const seriesPoints = series.getAllPoints();
        this.label = seriesPoints[0].getLabel();
    }
}

Once you access a label, you can, for example, hide or show it by calling the hide() or show() method.

JavaScript
label.hide();
// label.show();
See Also