Customize DonutChart

[Tuyen]

Hi,

Could you advise how to achieve this attached donut chart?

[Didi]

Hi Tuyen,

Thank you for the provided image. 

In order to show percentage, you will need to format the label using LabelFormat property. The Series Label customization options are described here: https://docs.telerik.com/devtools/xamarin/controls/chart/series/chart-series-features#labels-customization 

For example:

<telerikChart:RadPieChart>
    <telerikChart:RadPieChart.Series>
        <telerikChart:DonutSeries ShowLabels="True"
                                    InnerRadiusFactor="0.4"
                                    ValueBinding="Value"
                                    LabelFormat="{}{0:F1} %"
                                    ItemsSource="{Binding Data}" />
    </telerikChart:RadPieChart.Series>
</telerikChart:RadPieChart>

If you want to remove the border around the label, you will need to implement a custom renderer for Android.

Override the OnElementChanged method and assign a custom class to the LaberRenderer for its series. I have created a sample to show you how the renderer could be implemented. Please download the attached project and test it on your side. Note that this is just a sample and you may need to extend it further to match the exact requirements you have. Custom implementation is out of the Telerik support scope. 

I hope the provided information was helpful.

Regards,
Didi
Progress Telerik