Donut chart labels on DevExtreme for React

Question

I'm trying tyo generate donut charts with DevExtreme for React, and because of the lack of documentation adapting the code source from other frameworks. I can create the graphic with data received by props, but I am having a hard time trying to generate Labels for them.

Currently I can only use my arguments as legends, as seen here: donut chart with legend

And I needed it to be like displayed in labels, for example: donut chart with labels

I'm using the library DevExtreme React Wrappers ansy component Donut is something like this:

import React from 'react';
import PieChart, {Series, Label, Legend, Tooltip} from 'devextreme-react/ui/pie-chart';

class Donut extends React.Component {

    render(){

        return (

                <PieChart
                    type={"doughnut"}
                    palette={"Soft Pastel"}
                    dataSource={this.props.dataSource}
                  >
                  <Legend
                      visible={true} // should be false because I don't want legends, but currently I need them
                      horizontalAlignment={"left"}
                      verticalAlignment={"bottom"}
                      margin={0}
                  />
                  <Series
                      argumentField={'arg'}
                  />
                  <Tooltip
                      enabled={true}
                      shared={true}
                  />
                  <Label //I've tried so many variations adapted from JQuery or Angular documentation, but nothing seems to work.
                      visible={true}
                      format={'fixedPoint'}
                      argumentField={'arg'}
                    />
                </PieChart>
         );
     }
}
export default Donut;

Any help would be really appreciated. :)

Answer 1

A Label is a part of a Series, so the Label tag should be placed within the Series. Series argumentField should be set to 'region' (according to the demo)

This is about configuring the Chart, but unfortunately the 18.1.5-alpha.10 version has a regression regarding the Label component. So I would recommend you the following:

1) downgrade "devextreme-react" to "18.1.5-alpha.9" and track the issue

2) modify the code in this way:

var data = [{
    region: "Asia",
    val: 4119626293
}, {
    region: "Africa",
    val: 1012956064
}, {
    region: "Northern America",
    val: 344124520
}, {
    region: "Latin America and the Caribbean",
    val: 590946440
}, {
    region: "Europe",
    val: 727082222
}, {
    region: "Oceania",
    val: 35104756
}];

class Donut extends React.Component {

    render() {

        return (

            <PieChart
                type={"doughnut"}
                palette={"Soft Pastel"}
                dataSource={data}
            >
                <Legend
                    visible={true} // should be false because I don't want legends, but currently I need them
                    horizontalAlignment={"left"}
                    verticalAlignment={"bottom"}
                    margin={0}
                />
                <Series
                    argumentField={'region'}
                >
                    <Label
                        visible={true}
                        format={'fixedPoint'}
                        connector={{ visible: true }}
                    />
                </Series>
                <Tooltip
                    enabled={true}
                    shared={true}
                />
            </PieChart>
        );
    }
}