When customize label of pie chart. How to bind to change label value with data?

[JoeyNi]

I customize label of pie chart. When I change value in viewmodel data, the label of pie chart doesn't change.

XAML code:

<democommon:DemoControl.DataContext>
    <local:PieChartViewModel />
</democommon:DemoControl.DataContext>


<local:PieChartLabelConverter x:Key="labelconverter"/>


<DataTemplate x:Key="labelTemplate">
    <Grid>
        <Rectangle Stroke="White" Fill="Gray" StrokeThickness="1"/>
        <TextBlock
            Margin="6,3,6,3"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            FontSize="12"
            Foreground="White"
            Text="{Binding Converter={StaticResource labelconverter}}"/>
    </Grid>
</DataTemplate>


<chart:SfChart>
    <chart:PieSeries
        ItemsSource="{Binding Data}"
        XBindingPath="Country"
        YBindingPath="Count"
        LabelPosition="OutsideExtended"
        ListenPropertyChange="True">
        <chart:PieSeries.AdornmentsInfo>
            <chart:ChartAdornmentInfo
                ShowLabel="True"
                SegmentLabelContent="LabelContentPath"
                LabelTemplate="{StaticResource labelTemplate}"/>
        </chart:PieSeries.AdornmentsInfo>
    </chart:PieSeries>
</chart:SfChart>

PieChartLabelConverter is official example

[Nanthini Mahalingam]

Hello JoeyNi,

We have analyzed your query and would like to inform you that we can bind the data label of the pie using the SegmentLabelContent property along with the label template property. You can obtain the XValue or YValue without any converter by utilizing the Item property in the ChartPieAdronment class as shown in the code snippet.

<DataTemplate x:Key="dataTemplate">

                <Grid>

                    <Rectangle Stroke="White" Fill="Gray" StrokeThickness="1"/>

                    <TextBlock  Margin="6,3,6,3"  HorizontalAlignment="Center"

                                VerticalAlignment="Top" FontSize="12"  Foreground="White"

                                Text="{Binding Item.Country}"/>

                </Grid>

            </DataTemplate>

If you want to use the GroupTo property at that time, you should use a converter in the data template as shown in the code snippet.

[Xaml]

<Grid.Resources>

            <local:DataConverter x:Key="converter"/>

            <DataTemplate x:Key="dataTemplate">

                <Grid>

                    <Rectangle Stroke="White" Fill="Gray" StrokeThickness="1"/>

                    <TextBlock  Margin="6,3,6,3"  HorizontalAlignment="Center"

                                VerticalAlignment="Top" FontSize="12"  Foreground="White"

                                Text="{Binding Converter={StaticResource converter}}"/>

                </Grid>

            </DataTemplate>

        </Grid.Resources>

        <chart:SfChart Grid.Row="0>

…

            <chart:PieSeries

                x:Name="pieSeries" chart:ChartTooltip.EnableAnimation="True"

                EnableAnimation="True" EnableSmartLabels="True" ItemsSource="{Binding Data}"

                LabelPosition="OutsideExtended"  XBindingPath="Country" YBindingPath="Counts">

                <chart:PieSeries.AdornmentsInfo>

                    <chart:ChartAdornmentInfo  HorizontalAlignment="Center"

                    VerticalAlignment="Center" AdornmentsPosition="Bottom"

                    ConnectorHeight="10"  LabelTemplate="{StaticResource dataTemplate}"                

                    SegmentLabelContent="LabelContentPath" ShowConnectorLine="True"

                    ShowLabel="True" UseSeriesPalette="False" />

                </chart:PieSeries.AdornmentsInfo>

            </chart:PieSeries>

        </chart:SfChart>

C#

public class DataConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            ChartPieAdornment adornment = value as ChartPieAdornment;

 

            if (adornment != null && adornment.Series is PieSeries series)

            {

                if (adornment.Item is IEnumerable collection)

                {

                    StringBuilder stringBuilder = new StringBuilder();

                    foreach (PieChartModel item in collection)

                    {

                        if(item.Counts > 0)

                        {

                            stringBuilder.Append(item.Country + ":" + item.Counts + "\n");

                        }

                       

                    }

                    return stringBuilder.ToString();

                }

                else if (adornment.Item is PieChartModel item)

                {

                    return item.Country + ":" + item.Counts;

                }

            }

            return value;

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

Kindly refer to the following documentation:

https://help.syncfusion.com/wpf/charts/adornments/label#label-template

https://www.syncfusion.com/kb/12823/how-to-collapse-the-visibility-of-specific-data-label-in-wpf-chart-sfchart

If you are still facing any issues with the pie chart data labels, please provide more information about the converter coding.

Regards,

Nanthini Mahalingam.

Attachment: F181688_11d42de5.zip