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

The .NET MAUI Circular Chart 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

Download the complete sample from GitHub.

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

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

Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!