[Solved] How to add a label in the center of a donut chart

[Thanos]

I need to add a small label in the center of a donut chart like the one that follows

<telerik:RadPieChart>
    <telerik:RadPieChart.Series>
        <telerik:DonutSeries ShowLabels="True"
                             RadiusFactor="0.7"
                             InnerRadiusFactor="0.8"
                             ValueBinding="Value"
                             ItemsSource="{Binding Data}" />
    </telerik:RadPieChart.Series>
</telerik:RadPieChart>

As you can see from the code above there is enough UI space in the center of the donut chart (RadiusFactor = 0.7 & InnerRadiusFactor = 0.8)  to draw a label. However I cannot find any solution from the official docs to do this.

I can try to add a label in z-index over the control using this

<Grid>
    <telerik:RadPieChart>
        <telerik:RadPieChart.Series>
            <telerik:DonutSeries ShowLabels="True"
                                 RadiusFactor="0.7"
                                 InnerRadiusFactor="0.8"
                                 ValueBinding="Value"
                                 ItemsSource="{Binding Data}" />
        </telerik:RadPieChart.Series>
    </telerik:RadPieChart>
    <Grid Padding="30" BackgroundColor="Green">
        <Label Text="75%" />
    </Grid>
</Grid>

but I must do UI changes in order to center the label both vertically and horizontally.

 

 

[Didi]

Hello Thanos,

To add a label in the center of a donut chart in .NET MAUI, overlaying a Label on top of the RadPieChart using a Grid is the recommended approach. Currently, there is no built-in API in the DonutSeries to place a label directly in the center.

Here’s how to ensure your label is perfectly centered both vertically and horizontally:

Recommended XAML Structure:

<Grid>
    <telerik:RadPieChart>
        <telerik:RadPieChart.Series>
            <telerik:DonutSeries ShowLabels="True"
                                 RadiusFactor="0.7"
                                 InnerRadiusFactor="0.8"
                                 ValueBinding="Value"
                                 ItemsSource="{Binding Data}" />
        </telerik:RadPieChart.Series>
    </telerik:RadPieChart>
    <Grid
        HorizontalOptions="Center"
        VerticalOptions="Center"
        InputTransparent="True">
        <Label Text="75%"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               FontSize="24"
               TextColor="Black"/>
    </Grid>
</Grid>

Key Points:

• The overlay Grid is centered using HorizontalOptions and VerticalOptions, and InputTransparent="True" ensures that the label does not block interaction with the chart.
• The Label is centered inside the overlay Grid. Adjust FontSize and TextColor as needed for your design.
• Remove unnecessary padding and background from the overlay Grid for a clean look.

Feature Request:

I have opened a feature request on your behalf for rendering a label in the center of pie/donut chart: https://feedback.telerik.com/maui/1713026-chart-provide-an-option-to-render-a-label-in-the-center-of-the-pie-donut-chart you can cast your vote by pressing the vote button.

Regards,
Didi
Progress Telerik