The .NET MAUI SfCircularChart allows you to display additional data in the tooltip by customizing the tooltip content through the TooltipTemplate property. This enables you to present more detailed information in the tooltip, enhancing the user experience when interacting with chart segments.
Step 1: Define the DataTemplate for the Tooltip
The TooltipTemplate property is used to specify a custom template for the tooltip. In this case, the TooltipTemplate displays more data, such as the category name, amount, and percentage. By default, it displays the corresponding Y-axis value of the segment.
The following code demonstrates how to define a DataTemplate for the tooltip:
[XAML]
<chart:SfCircularChart> <chart:SfCircularChart.Resources> <DataTemplate x:Key="tooltipTemplate"> <StackLayout Padding="10" Orientation="Vertical" Spacing="10"> <!-- Category and Amount --> <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Center" Spacing="10"> <Label Text="{Binding Item.Category}" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="Start" FontAttributes="Bold" FontFamily="Helvetica" FontSize="16"/> <Label Text="{Binding Item.Amount, StringFormat=': {0}$'}" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="End" FontAttributes="Bold" FontFamily="Helvetica" FontSize="16"/> </StackLayout> <!-- Separator --> <BoxView HeightRequest="1" BackgroundColor="#D3D3D3"/> <!-- Percentage --> <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Center" Spacing="10"> <Label Text="Percentage" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="Start" FontAttributes="Bold" FontFamily="Helvetica" FontSize="14"/> <Label Text="{Binding Item.Percentage, StringFormat=': {0:F2}%'}" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="End" FontAttributes="Bold" FontFamily="Helvetica" FontSize="14"/> </StackLayout> </StackLayout> </DataTemplate> </chart:SfCircularChart.Resources> . . . </chart:SfCircularChart> Step 2: Apply the Custom Tooltip Template
Now, apply the custom tooltip template to the PieSeries by assigning it to the TooltipTemplate property
[XAML]
<chart:SfCircularChart> . . . <chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Category" YBindingPath="Amount" ShowDataLabels="True" EnableTooltip="True" LegendIcon="SeriesType" TooltipTemplate="{StaticResource tooltipTemplate}"/> </chart:SfCircularChart> By following these steps, you can display more data, such as category names, amounts, and percentages, in the chart's tooltip.
Output