Pie chart label horizontal alignement (v3.0)

got an issue on the pie chart label. Can you please advice or explain me how to align horizontally the labels ? I try several things without success.

readonly PieConfig myPieChartConfig = new PieConfig { AutoFit = true, AngleField = "value", ColorField = "type", Label = new PieLabelConfig { Visible = true, Type = "inner" } };

Thanks for the support.

[superjerry88]

Hi @Youldboukhitine,

I manage to recreate this for you, but because post processing is required to calculate the total 100%, some javascript is needed. (It is shown as 82% here because its 70 out of 85)

Here’s how you can do it:

<Pie Data=data Config="csConfig" JsConfig="@jsConfig" />

public string jsConfig = @"{label: {content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,}}";

PieConfig csConfig = new PieConfig()
    {
        Radius = 0.8,
        AngleField = "value",
        ColorField = "type",
        Label = new PieLabelConfig()
        {
            Visible = true,
            Type = "inner",
            AutoRotate = false,
            Style = new TextStyle()
            {
                TextAlign = TextStyle.TextAlignCenter,
                FontSize = 21,
            },
        },
    };

For JS documentation, you can refer to here: https://charts.ant.design/en/examples/pie/basic#basic

[Yz274419]

Thank you for your reply. I am currently using version 0.3.1. I also tried changing the version to 0.3.0, but I was unable to reproduce the issue. I created a simple project at https://github.com/Yz274419/AntPie/blob/main/Pages/Counter.razor