How to Display More Data in the Tooltip in MAUI CircularChart?

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 binding context for TooltipTemplate is TooltipInfo, which provides the necessary data for customizing the tooltip.

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

Explore the runnable demo from this GitHub location.

Conclusion
I hope you enjoyed learning about how to display more data in the tooltip in MAUI CircularChart.
You can refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!