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

Set text into a donut chart

1 Answer 237 Views
Chart
This is a migrated thread and some comments may be shown as answers.
alejandro
Top achievements
Rank 1
alejandro asked on 16 Mar 2020, 08:29 AM

Hi.

 

I would like to obtain a donut-like graph similar to the one in the image. How could I put text inside a donut graphic?

 

Thank you.

1 Answer, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 18 Mar 2020, 02:31 PM

Hi Alejandro,

Thank you for the provided image.

The DoughnutSeries does not provide an API to add text in the center. You can achieve this by manually positioning a TextBlock in the center of the doughnut. Check the following code snippet.

<Grid Margin="50">
    <telerik:RadPieChart Palette="Windows8">            
        <telerik:RadPieChart.Series>
            <telerik:DoughnutSeries >
                <telerik:DoughnutSeries.LabelConnectorsSettings>
                    <telerik:ChartSeriesLabelConnectorsSettings />
                </telerik:DoughnutSeries.LabelConnectorsSettings>
                    
                <telerik:DoughnutSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition Margin="-20 0 0 0" />
                </telerik:DoughnutSeries.LabelDefinitions>
                    
                <telerik:DoughnutSeries.DataPoints>
                    <telerik:PieDataPoint Label="43.46%" Value="43.46"/>
                    <telerik:PieDataPoint Label="27.53%" Value="27.53"/>
                    <telerik:PieDataPoint Label="15.11%" Value="15.11"/>
                    <telerik:PieDataPoint Label="10.35%" Value="10.35"/>
                    <telerik:PieDataPoint Label="3.55%" Value="3.55"/>
                </telerik:DoughnutSeries.DataPoints>
            </telerik:DoughnutSeries>
        </telerik:RadPieChart.Series>
    </telerik:RadPieChart>
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="Total:" HorizontalAlignment="Center"/>
        <TextBlock Text="1160055"/>
    </StackPanel>
</Grid>

In addition, you can check the following help article which I think will be handy for achieving your final behavior.

I hope this information is helpful. If further questions arise, don't hesitate to contact us again.

Regards,
Dinko
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart
Asked by
alejandro
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or