Articles in this section
Category / Section

How to display underlying model values in Xamarin.Forms Chart data marker?

1 min read

The data marker label is entirely customizable using data template. The binding context of data template will be the respective underlying object, so you can bind any property from the model to the elements of data template. Refer to the documentation to learn more about data markers.

The following code example and screenshot show how to display the X value along with Y value in data label.

 

<chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">
    <chart:PieSeries.ColorModel>
        <chart:ChartColorModel Palette="Natural" />
    </chart:PieSeries.ColorModel>
    <chart:PieSeries.DataMarker>
        <chart:ChartDataMarker>
            <chart:ChartDataMarker.LabelTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal">
                        <Label FontSize="12" TextColor="White" Text="{Binding Name, StringFormat='{0} : '}" />
                        <Label FontSize="12" TextColor="White" Text="{Binding Height}" />
                    </StackLayout>
                </DataTemplate>
            </chart:ChartDataMarker.LabelTemplate>
        </chart:ChartDataMarker>
    </chart:PieSeries.DataMarker>
</chart:PieSeries>

 

Output:

C:\Users\prabakaranr\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screen Shot 2018-04-25 at 11.32.50 AM.PNG

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied