We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Marker Position and Size

Is it somehow possible to place a marker (for example a triangle) with its tip and not its center to the coordinates?

How can i prevent that the marker keeps it's size when the axes are rescaling?

1 Reply

GR Geetha Rajendran Syncfusion Team October 4, 2019 01:29 PM UTC

Hi Marcel, 
  
We have achieved your requirement by using the LabelTemplate property of ChartDataMarker. Please refer the below code. 
  
Code snippet [C#]: 
<ContentPage.Resources> 
    <ResourceDictionary> 
        <OnPlatform x:TypeArguments="x:String" x:Key="FontIcon"> 
            <On Platform="Android" Value="Segoe_MDL2_Assets.ttf#Segoe MDL2 Assets" /> 
            <On Platform="iOS" Value="/Assets/Segoe_MDL2_Assets.ttf#Segoe MDL2 Assets" /> 
            <On Platform="UWP" Value="Segoe MDL2 Assets"/> 
        </OnPlatform> 
    </ResourceDictionary> 
</ContentPage.Resources> 
  
. . . 
  
<chart:ColumnSeries x:Name="series" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="Growth" > 
    <chart:ColumnSeries.DataMarker> 
        <chart:ChartDataMarker ShowMarker="False" > 
            <chart:ChartDataMarker.LabelStyle> 
                <chart:DataMarkerLabelStyle OffsetY="-9" LabelPosition="Inner" /> 
            </chart:ChartDataMarker.LabelStyle> 
            <chart:ChartDataMarker.LabelTemplate> 
                <DataTemplate> 
                    <Label Text="&#xE878;"  
                                   HorizontalTextAlignment="Center"  
                                   VerticalOptions="Center" 
                                   VerticalTextAlignment="Center" 
                                   HorizontalOptions="Start"  
                                   FontSize="25"  
                                   TextColor="White" FontFamily="{StaticResource FontIcon}"> 
                    </Label> 
                </DataTemplate> 
            </chart:ChartDataMarker.LabelTemplate> 
        </chart:ChartDataMarker> 
    </chart:ColumnSeries.DataMarker> 
</chart:ColumnSeries> 
  
  
Screenshot: 
 
  
Thanks, 
Geetha R. 


Loader.
Live Chat Icon For mobile
Up arrow icon