Category / Section
How to display more data in the tooltip of Xamarin.Forms Charts
1 min read
The Xamarin.Forms Chart provides the support to display the needed information from its model of populated items source along with the Tooltip UI customization with the help of TooltipTemplate in chart series as shown in the following code example.
Here, display both country name and its population details in the tooltip. By default, it displays the corresponding y-axis value of that segment.
<ContentPage.Resources>
<DataTemplate x:Key="tooltipTemplate">
<StackLayout Orientation="Horizontal">
<Label TextColor="White">
<Label.Text>
<MultiBinding StringFormat="{}{0} : {1}">
<Binding Path="XValue"/>
<Binding Path="YValue"/>
</MultiBinding>
</Label.Text>
</Label>
</StackLayout>
</DataTemplate>
</ContentPage.Resources>
<StackLayout Margin="30">
<syncfusion:SfChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<syncfusion:SfChart.Title>
<syncfusion:ChartTitle Text="Population growth" />
</syncfusion:SfChart.Title>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis LabelPlacement="BetweenTicks" ShowMajorGridLines="False">
</syncfusion:CategoryAxis>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis EdgeLabelsDrawingMode="Fit" ShowMinorGridLines="False" ShowMajorGridLines="False" >
</syncfusion:NumericalAxis>
</syncfusion:SfChart.SecondaryAxis>
<syncfusion:ColumnSeries x:Name="series" Color="#035afc" EnableTooltip="True" TooltipTemplate="{StaticResource tooltipTemplate}" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"/>
<syncfusion:SfChart.ChartBehaviors>
<syncfusion:ChartTooltipBehavior/>
</syncfusion:SfChart.ChartBehaviors>
</syncfusion:SfChart>
</StackLayout>
View the complete sample in GitHub
See also
How to bind the Xamarin.Forms pie chart tooltip to “Others” category values
How to show tooltip on Xamarin.Forms Chart axis label click
How to hide tooltip programmatically in Xamarin.Forms
