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:
