Set text into a donut chart

[alejandro]

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.

[Dinko | Tech Support Engineer]

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.

• DoughnutSeries
• Label Connectors
• RadLegend Support 
• RadLegend ItemTemplate: Using the ItemTemplate property of the control you can create custom DataTemplate to place icon inside as shown in the attached image.

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

Regards,
Dinko
Progress Telerik