How can i show the percent in the pie slice, and show the name outside the pice slice

1 Answer 46 Views
ChartView
ALi
Top achievements
Rank 1
ALi asked on 02 May 2021, 02:58 AM

hello,

How can i show the percent in the pie slice, and show the DataItem.Category outside the pice slice. But Now the Percent display outside the pice slice as the DataItem.Category.

Thans!

 

                        <telerik:PieSeries.LabelDefinitions>
                            <telerik:ChartSeriesLabelDefinition Margin="-4 0 0 0">
                                <telerik:ChartSeriesLabelDefinition.Template>
                                    <DataTemplate>
                                        <StackPanel>
                                            <TextBlock Text="{Binding DataItem.Category}" HorizontalAlignment="Center" FontSize="14"/>
                                            <TextBlock Text="{Binding Percent, StringFormat=\{0:N\} %}" FontSize="14"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </telerik:ChartSeriesLabelDefinition.Template>
                            </telerik:ChartSeriesLabelDefinition>
                        </telerik:PieSeries.LabelDefinitions>

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 05 May 2021, 01:18 PM

Hello Ali,

Adding an item in the LabelDefinitions collection of the series overrides default label settings. To achieve your requirement, you can define two ChartSeriesLabelDefinitions and set them up according to your requirement. For example:

<telerik:PieSeries.LabelDefinitions>
	<telerik:ChartSeriesLabelDefinition Margin="60" />
	<telerik:ChartSeriesLabelDefinition Margin="-4 0 0 0">
		<telerik:ChartSeriesLabelDefinition.Template>
			<DataTemplate>
				<TextBlock Text="{Binding DataItem.Category}" HorizontalAlignment="Center" FontSize="14"/>
			</DataTemplate>
		</telerik:ChartSeriesLabelDefinition.Template>
	</telerik:ChartSeriesLabelDefinition>
</telerik:PieSeries.LabelDefinitions>

Additionally, you can add connection lines for the outside labels. You can do this using the LabelConnectorsSettings property of the series.

You can find those suggestions in the attached project.

Regards,
Martin Ivanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ALi
Top achievements
Rank 1
commented on 07 May 2021, 03:06 AM

solved my problem, thank you very much
Tags
ChartView
Asked by
ALi
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or