How to add custom label in Ant design Charts?

Question

I have a antd donut pie chart in my app. It looks like this: antd donut pie chart

and the config for it:

const chartData = packArray.map(pack => ({
      type: pack.name,
      value: pack.quantity,
    }));

    const config = {
      data: chartData,
      angleField: 'value',
      colorField: 'type',
      innerRadius: 0.5,
      radius: 1,
      label: {
        type: 'inner',
        offset: '-30%',
        content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        style: {
          fontSize: 14,
          textAlign: 'center',
        },
      },
      interactions: [
        {
          type: 'element-active',
        },
      ],
    };

The value field is based on quantity sold for each product. The sum of the total quantity sold is 26. By default, as you can see in the image, the chart label says 'Total 26' which is something I haven't specified in my config or anywhere else. it is by default showing that. I want to add a custom text there instead of total 26 or whatever default text the chart may generate. How can I achieve this? How can I set a custom text in the middle of chart?

What I tried: If I edit the content in label { } of the config, it changes the whole chart, it displays the label in the chart pads instead of values. Suppose if I change the content to

label : { content: `Total: ${packAmountTotal}€` } it would look like this: custom label content

so i cannot do that. What can I do to change only the center text with my custom text?

Answer 1

You can add custom text by adding static after interactions in your config, based on this ant-design donut pie chart docs:

  //...
   statistic: {
      title: false,
      content: {
        style: {
          //...
        },
        content: 'Custom Label', // Here you can add custom label inside donut pie chart
      },
    }, 
  //...