This is a migrated thread and some comments may be shown as answers.

Customize DonutChart

1 Answer 35 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Tuyen
Top achievements
Rank 1
Veteran
Tuyen asked on 30 Dec 2020, 07:04 AM
Hi,

Could you advise how to achieve this attached donut chart?

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 30 Dec 2020, 10:01 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Chart
Asked by
Tuyen
Top achievements
Rank 1
Veteran
Answers by
Didi
Telerik team
Share this question
or