Why does the datamarker sometimes get too far to the right and mark it partially invisible?

[John Dalsgaard]

I have a chart in a carousel where it for some graphs expands too much and therefore the datamarker is almost invisible:

This is Ok:

Here is my markup:

<Grid Padding="5,10" Margin="10,0,10,5" BackgroundColor="White">
    <CarouselView HeightRequest="150" ItemsSource="{Binding FphList}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <Grid RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="110"/>
                    </Grid.RowDefinitions>
                    <ContentView Grid.Row="0" Grid.RowSpan="2"/>
                    <Label Grid.Row="0" Text="{Binding FishPerHourTitle}" Margin="5" Style="{StaticResource HeadingText}"/>
                    <!-- Bar chart with catch stats -->
                    <chart:SfChart Grid.Row="1" ChartPadding="5" BackgroundColor="AliceBlue">
                        <chart:SfChart.PrimaryAxis>
                            <chart:CategoryAxis ShowMajorGridLines="False">
                                    <chart:CategoryAxis.LabelStyle>
                                        <chart:ChartAxisLabelStyle Font="15" TextColor="Black"/>
                                    </chart:CategoryAxis.LabelStyle>
                            </chart:CategoryAxis>
                        </chart:SfChart.PrimaryAxis>
                        <chart:SfChart.SecondaryAxis>
                            <chart:NumericalAxis ShowMajorGridLines="False" ShowMinorGridLines="False" IsVisible="False"/>
                        </chart:SfChart.SecondaryAxis>
                        <chart:BarSeries ItemsSource="{Binding Stats}" XBindingPath="TargetName" YBindingPath="FishPerHour" Color="{StaticResource PrimaryAppColor}" Width="0.5" EnableAnimation="True">
                            <chart:BarSeries.DataMarker>
                                <chart:ChartDataMarker>
                                    <chart:ChartDataMarker.LabelStyle>
                                        <chart:DataMarkerLabelStyle LabelPosition="Outer" LabelFormat="#.##" Font="12" TextColor="Black" BackgroundColor="White"/>
                                    </chart:ChartDataMarker.LabelStyle>
                                </chart:ChartDataMarker>
                            </chart:BarSeries.DataMarker>
                        </chart:BarSeries>
                    </chart:SfChart>
                </Grid>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</Grid>

I have coloured the chart background for debugging purposes :-)

Ideally, I want the datamarker to be outside of the bar - but sometimes it decides to show it inside the bar (I have a filter that will repopulate the list of data):

... this is the same markup as above???

[Devakumar Dhanapoosanam]

Hi John Dalsgaard, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and provided screenshot and we suspect that you have set the numerical axis Maximum and Minimum property value in your sample. Please ensure whether you were using the Maximum and Minimum property in your sample or not.  

 

We would like to let you know that the default DataMarker LabelPosition is set as Auto which will be place the DataMarker Label Inner/Outer based on the available space without cutting. You can achieve your requirement by using the RangePadding Additional for the NumericalAxis as per in the below code snippet to show the DataMarker Label always outside as per your requirement. 

 

XAML: 

<chart:SfChart.SecondaryAxis> 

        <chart:NumericalAxis Minimum="0" RangePadding="Additional"/> 

</chart:SfChart.SecondaryAxis> 

… 

<chart:BarSeries ItemsSource="{Binding Stats}" 

                         XBindingPath="TargetName" YBindingPath="FishPerHour" 

                         DataMarkerPosition="Top"> 

       <chart:BarSeries.DataMarker> 

                <chart:ChartDataMarker> 

                    <chart:ChartDataMarker.LabelStyle> 

                        <chart:DataMarkerLabelStyle LabelPosition="Outer"/> 

                    </chart:ChartDataMarker.LabelStyle> 

                </chart:ChartDataMarker> 

         </chart:BarSeries.DataMarker> 

</chart:BarSeries> 

… 

 

UG: https://help.syncfusion.com/xamarin/charts/axis#apply-padding-to-the-range 

 

If the above solution does not resolve your issue, please provide the current SfChart version using in your application. 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D 

[John Dalsgaard]

Thanks for your response. Adding the Minimum and RangePadding attributes solved it!

[Devakumar Dhanapoosanam]

Hi John Dalsgaard, 

 

We are glad to hear that your requirement has been achieved. 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D