Tooltip in .NET MAUI Circular Chart

9 Jul 20266 minutes to read

Tooltip is used to display any information or metadata of the tapped segment. The Circular Chart provides tooltip support for all series.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfCircularChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

Define Tooltip

To define the tooltip in the chart, set the EnableTooltip property of series to true. The default value of EnableTooltip property is false.

XAML

<chart:SfCircularChart>
    <!-- code omitted for brevity -->
    <chart:PieSeries EnableTooltip="True"/>   
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();
// code omitted for brevity
PieSeries series = new PieSeries();
series.EnableTooltip = true;
chart.Series.Add(series);
this.Content = chart;

The ChartTooltipBehavior is used to customize the tooltip by creating an instance and setting it to the TooltipBehavior property of SfCircularChart. The following properties are used to customize the tooltip:

• Background - Gets or sets the background color to the tooltip label.
• FontAttributes - Gets or sets the font style for the label.
• FontFamily - Gets or sets the font family name for the label.
• FontSize - Gets or sets the font size for the label.
• Duration - Gets or sets the duration of the tooltip text in seconds.
• Margin - Gets or sets the margin of the label to customize the appearance of label.
• TextColor - Gets or sets the color for the text of the label.
• Stroke - Gets or sets the border color of the tooltip.
• StrokeWidth - Gets or sets the thickness of the tooltip border.
• UseSeriesFillColor - Gets or sets a value indicating whether the tooltip background should use the fill color of the associated series. When set to true, the tooltip adopts the series color as its background.

XAML

<chart:SfCircularChart>
    <chart:SfCircularChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Duration="10"/>
    </chart:SfCircularChart.TooltipBehavior>
    <!-- code omitted for brevity -->
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();
// code omitted for brevity
chart.TooltipBehavior = new ChartTooltipBehavior()
{
    Duration = 10,
};
this.Content = chart;

Template

Circular chart provides support to customize the appearance of the tooltip by using the TooltipTemplate property. The tooltip binding context provides access to the data point’s Item property, which contains the original data object with all bound properties (e.g., Item.Product, Item.SalesRate).

XAML

<chart:SfCircularChart>
    <chart:SfCircularChart.Resources>
        <DataTemplate x:Key="tooltipTemplate">
            <HorizontalStackLayout>
                <Label Text="{Binding Item.Product}"
                       TextColor="Black"
                       FontAttributes="Bold"
                       FontSize="12"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
                <Label Text=" : " 
                       TextColor="Black"
                       FontAttributes="Bold"
                       FontSize="12"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
                <Label Text="{Binding Item.SalesRate}"
                       TextColor="Black"
                       FontAttributes="Bold"
                       FontSize="12"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </chart:SfCircularChart.Resources>

    <chart:PieSeries EnableTooltip="True"
             ItemsSource="{Binding Data}" 
             XBindingPath="Product" 
             YBindingPath="SalesRate"
             TooltipTemplate="{StaticResource tooltipTemplate}"/>
    <!-- code omitted for brevity -->
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();
// code omitted for brevity
PieSeries series = new PieSeries();
series.EnableTooltip = true;
series.TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate; 

this.Content = chart;