Pie Chart in Ant Design Charts don't have option to show label by percentage . How can i do it manually?

Question

const DemoPie: React.FC = () => {
  var data = [
    {
      type: 'a',
      value: 40,
    },
    {
      type: 'b',
      value: 25,
    },
    {
      type: 'c',
      value: 190,
    },
    {
      type: 'd',
      value: 15,
    },
    {
      type: 'e',
      value: 10,
    },
    {
      type: 'f',
      value: 50,
    },
  ];
  var config = {
    appendPadding: 10,
    data: data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    label: {
      type: 'inner',
      offset: '-30%',
      content: function content(_ref) {
        var percent = _ref.percent;
        return ''.concat(percent * 100, '%');
      },
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    interactions: [{ type: 'element-active' }],
  };
  return <Pie {...config} />;
};

export default DemoPie;

With this code the pie labels are showing the 'value' key as the percentage but not the actual %age of the part of the chart it takes.

Suppose for type:'a' the value is 40. So in pie chart its showing 40% and not the actual percentage it takes as compared to others. How can i achieve this? I am stuck at this for hours

Answer 1

You may change the label content from percentage to value

label: {
  type: 'inner',
  offset: '-30%',
  content: function content(_ref) {
    return ''.concat(_ref.value, '%');
  },
  style: {
  fontSize: 14,
    textAlign: 'center',
  },
}

Full code

const DemoPie: React.FC = () => {
  var data = [
    {
      type: 'a',
      value: 40,
    },
    {
      type: 'b',
      value: 25,
    },
    {
      type: 'c',
      value: 190,
    },
    {
      type: 'd',
      value: 15,
    },
    {
      type: 'e',
      value: 10,
    },
    {
      type: 'f',
      value: 50,
    },
  ];
  var config = {
    appendPadding: 10,
    data: data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    label: {
      type: 'inner',
      offset: '-30%',
      content: function content(_ref) {
        return ''.concat(_ref.value, '%');
      },
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    interactions: [{ type: 'element-active' }],
  };
  return <Pie {...config} />;
};

export default DemoPie;

Demo