Issue with Pie Chart Annotation position

[Krishna Kumar Nanjundaprasad]

Hello,

The following is the code for my generic pie chart;

<UserControl x:Class="SweProMasterSales.Views.UserControls.uc_PieChart"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:chart="clr-namespace:Syncfusion.Windows.Chart;assembly=Syncfusion.Chart.Wpf"
             xmlns:sfchart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <Border BorderThickness="10" BorderBrush="#efefef" Background="#efefef">
        <Grid Background="#f9f9f9" >
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Text="{Binding ChartTitle}" Margin="15,0,0,5" FontSize="24" VerticalAlignment="Center" />

            <sfchart:SfChart Grid.Row="1" HorizontalAlignment="Left"
                             HorizontalContentAlignment="Left" BorderThickness="0"
                             BorderBrush="#fff" Padding="0,0,10,0" OverridesDefaultStyle="True"
                             UseLayoutRounding="True" AreaBorderThickness="0">
                <sfchart:SfChart.Behaviors>
                    <sfchart:ChartSelectionBehavior />
                </sfchart:SfChart.Behaviors>
                <sfchart:SfChart.Legend>
                    <sfchart:ChartLegend DockPosition="Right" CornerRadius="0" Margin="-30,-50,0,0" CheckBoxVisibility="Collapsed"
                                         BorderThickness="1" Width="auto" Height="auto" LegendPosition="Outside">
                        <sfchart:ChartLegend.HeaderTemplate>
                            <DataTemplate>
                                <StackPanel>
                                    <TextBlock Text="{Binding DataContext.TotalText, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                                               FontSize="18"
                                               Visibility="{Binding DataContext.ShowChartLegendHeader,RelativeSource={RelativeSource AncestorType={x:Type UserControl}},Converter={StaticResource VisibilityIfTrueConverter}}"/>
                                    <Button Style="{StaticResource ImageButton}" Margin="0,5,0,20" HorizontalAlignment="Left" HorizontalContentAlignment="Left"
                                            Visibility="{Binding DataContext.ShowChartLegendHeader,RelativeSource={RelativeSource AncestorType={x:Type UserControl}},Converter={StaticResource VisibilityIfTrueConverter}}"
                                            Command="{Binding DataContext.TotalClickCommand,RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}">
                                        <TextBlock Text="{Binding DataContext.TotalValue,RelativeSource={RelativeSource AncestorType={x:Type sfchart:SfChart}}}"
                                                   Margin="0,5,0,20" FontSize="28" FontWeight="Bold"/>
                                    </Button>
                                </StackPanel>
                            </DataTemplate>
                        </sfchart:ChartLegend.HeaderTemplate>
                        <sfchart:ChartLegend.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Width="auto" Margin="0,25,20,0" HorizontalAlignment="Left">
                                </StackPanel>
                            </ItemsPanelTemplate>
                        </sfchart:ChartLegend.ItemsPanel>
                       
                        <sfchart:ChartLegend.ItemTemplate>
                            <DataTemplate>
                                <Grid HorizontalAlignment="Left" Margin="0,0,0,10">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>

                                    <!--For Legend icon-->
                                    <Rectangle Margin="0,0,0,0" Width="15" Height="15" Fill="{Binding Interior}"></Rectangle>
                                    <!--For Legend label-->
                                    <TextBlock Margin="10,0,5,0" Grid.Column="1" Text="{Binding Label}" FontSize="14"></TextBlock>
                                </Grid>
                            </DataTemplate>
                        </sfchart:ChartLegend.ItemTemplate>
                    </sfchart:ChartLegend>
                </sfchart:SfChart.Legend>
                <sfchart:PieSeries DockPanel.Dock="Left" LabelPosition="Inside"  sfchart:ChartTooltip.EnableAnimation="True"
                                   ItemsSource="{Binding ChartData}" XBindingPath="{Binding XBindingPathValue}" YBindingPath="{Binding YBindingPathValue}"
                                   PieCoefficient="0.50"
                                   EnableSmartLabels="True" SelectedIndex="{Binding SelectedChartSegmentIndex,Mode=TwoWay}"
                                   ShowTooltip="false" BorderThickness="1" BorderBrush="White"
                                   HorizontalContentAlignment="Left" Width="auto"
                                   Margin="-100,-50,-50,-50" FontSize="20" FontWeight="Bold"
                                   Palette="Custom" ColorModel="{Binding CustomColorModel}">
                    <sfchart:PieSeries.AdornmentsInfo>
                        <sfchart:ChartAdornmentInfo AdornmentsPosition="TopAndBottom" ShowConnectorLine="true" ShowLabel="True"
                                                    SegmentLabelContent="LabelContentPath" Foreground="#fff"
                                                    ConnectorHeight="80" UseSeriesPalette="True">
                        </sfchart:ChartAdornmentInfo>
                    </sfchart:PieSeries.AdornmentsInfo>
                </sfchart:PieSeries>
            </sfchart:SfChart>
        </Grid>
    </Border>
</UserControl>

When I run the code with the appropriate data for the chart, I am encountering a weird issue. The annotation labels are not positioned and/or pointing in the appropriate sections sometimes and these sometimes are when the value is 0 or when it is very less than the values of the other sections of chart.
Please find the rendered chart with issues in the attachment.

Please guide me in getting the position right.

Thanks & regards,
Krishna

Attachment: SfChart.PieSeries_Error_d67c8147.zip

[Rachel A]

Hi Krishna,

 

Thanks for contacting Syncfusion Support.

 

We can remove the default padding using PieCoeffecient, you can avoid the use of margin in the PieSeries. The labels are improperly positioned due to the negative margins in Series.

 

Please find the following sample for your reference.

 

Sample: PieSeriesSample

 

Regards,

Rachel. A

[Krishna Kumar Nanjundaprasad]

Hello Rachel,

Thank you very much for your response. I will give it a try and will let you know the result.

Have a nice day.

Best regards,

Krishna

[Krishna Kumar Nanjundaprasad]

Hello Rachel,

The solution that you provided worked. 

Thank you.

Best regards,

Krishna

[Rachel A]

Hi Krishna,

Thanks for the update.

Please let us know if you have any query.

Regards,

Rachel. A