How to display more data in the tooltip in MAUI Chart (SfCartesianChart)?
The .NET MAUI Chart provides 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 the chart series as shown in the following code example.
Here, it displays both a country's name and population details in the tooltip. By default, it displays the corresponding y-axis value of that segment.
<chart:SfCartesianChart>
<chart:SfCartesianChart.BindingContext>
<local:ViewModel/>
</chart:SfCartesianChart.BindingContext>
<chart:SfCartesianChart.Resources>
<ResourceDictionary>
<DataTemplate x:Key="tooltipTemplate">
<HorizontalStackLayout>
<!--Template has BindingContext as its Segment named Item. From it, you can access the corresponding Model data-->
<Label Text="{Binding Item.Country}" TextColor="White" FontSize="12"/>
<Label Text=" : " TextColor="White" FontSize="12"/>
<Label Text="{Binding Item.Population}" TextColor="White" FontSize="12"/>
</HorizontalStackLayout>
</DataTemplate>
</ResourceDictionary>
</chart:SfCartesianChart.Resources>
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:ColumnSeries ItemsSource="{Binding Data}"
XBindingPath="Country" YBindingPath="Population"
EnableTooltip="True"
TooltipTemplate="{StaticResource tooltipTemplate}">
</chart:ColumnSeries>
</chart:SfCartesianChart>
Output
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to display more data in the tooltip in MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Charts and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
