Tooltip in .NET MAUI Chart

A tooltip is used to display information or metadata of the tapped segment. The Polar chart provides tooltip support for all series.

Define Tooltip

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

<chart:SfPolarChart>
    . . .
    <chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree" 
                           EnableTooltip="True"/>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
. . .
PolarAreaSeries series = new PolarAreaSeries()
{
    ItemsSource = new PlantViewModel().PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    EnableTooltip = true
};

chart.Series.Add(series);
this.Content = chart;

Tooltip template in MAUI Chart

The ChartTooltipBehavior is used to customize the tooltip. For customizing the tooltip, create an instance ChartTooltipBehavior and set it to the TooltipBehavior property of SfPolarChart. 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 - Used to set the color for the text of the label.
<chart:SfPolarChart>
    <chart:SfPolarChart.TooltipBehavior>
        <chart:ChartTooltipBehavior/>
    </chart:SfPolarChart.TooltipBehavior>
    ...
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
chart.TooltipBehavior = new ChartTooltipBehavior();
. . .
this.Content = chart;

Duration

The Duration property is used to specify the duration time in milliseconds for which tooltip will be displayed.

<chart:SfPolarChart>
    . . .  
    <chart:SfPolarChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Duration="5000"/>
    </chart:SfPolarChart.TooltipBehavior>

    <chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}"
                           XBindingPath="Direction" YBindingPath="Tree" 
                           EnableTooltip="True"/>               
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
. . .
chart.TooltipBehavior = new ChartTooltipBehavior()
{
    Duration = 5000
};

PolarAreaSeries series = new PolarAreaSeries()
{
    ItemsSource = new PlantViewModel().PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    EnableTooltip = true
};

chart.Series.Add(series);
this.Content = chart;

Template

The SfPolarChart provides support for customizing the appearance of the tooltip by using the TooltipTemplate property.

<chart:SfPolarChart >
    <chart:SfPolarChart.Resources>
        <DataTemplate x:Key="tooltipTemplate" x:Name="temp">
            <StackLayout>
                <Label Text="{Binding Item.Direction}" HorizontalTextAlignment="Center" HorizontalOptions="Center"  VerticalTextAlignment="Center"                       
                       TextColor="White" FontAttributes="Bold" FontFamily="Helvetica" Margin="0,2,0,2" FontSize="12.5"/>
                <BoxView Color="Gray" HeightRequest="1" WidthRequest="90"/>
                <StackLayout Orientation="Horizontal" VerticalOptions="Fill" Spacing="0" Padding="3" Margin="0" HorizontalOptions="Center">
                    <Ellipse Stroke="White" StrokeThickness="2" HeightRequest="10" 
                             WidthRequest="10" Fill="#48988B" Margin="0,1,3,0"/>
                    <Label Text="Tree"  VerticalTextAlignment="Center" HorizontalOptions="Start" 
                           TextColor="White" FontFamily="Helvetica" FontSize="12" Margin="3,0,3,0"/>
                    <Label Text="{Binding Item.Tree,StringFormat=' :  {0}'}" VerticalTextAlignment="Center" HorizontalOptions="End" TextColor="White" FontFamily="Helvetica" Margin="0,0,3,0" FontSize="12"/>
                </StackLayout>
            </StackLayout>
        </DataTemplate>
        . . .          
    </chart:SfPolarChart.Resources>
    . . .
    <chart:SfPolarChart.TooltipBehavior>
        <chart:ChartTooltipBehavior/>
    </chart:SfPolarChart.TooltipBehavior>

    <chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}"  XBindingPath="Direction" YBindingPath="Tree" 
                           TooltipTemplate="{StaticResource tooltipTemplate}" EnableTooltip="True"/>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
. . .
PolarAreaSeries series = new PolarAreaSeries()
{
    ItemsSource = new PlantViewModel().PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    EnableTooltip = true,
    TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate
};

chart.Series.Add(series);
this.Content = chart;

Tooltip template in MAUI Chart

Methods

You can programmatically show or hide the chart tooltip by using the show or hide method.

Show method

The Show method is used to activate the tooltip at the specified location.

<chart:SfPolarChart>
    ...
    <chart:SfPolarChart.TooltipBehavior>
        <chart:ChartTooltipBehavior x:Name="tooltip">
        </chart:ChartTooltipBehavior>
    </chart:SfPolarChart.TooltipBehavior>
    ...
</chart:SfPolarChart>

<Button Text="Show tooltip" Clicked="Button_Clicked"/>
private void Button_Clicked(object sender, EventArgs e)
{
    //pointX - determines the x position of the tooltip, pointY - determines the y position of the tooltip and the boolean value determines whether the tooltip should be animated while displaying.
    
    tooltip.Show(pointX, pointY, true);
}

NOTE

The tooltip will only be activated at the specified location if there is a data point under that location.

Hide method

The Hide method is used to hide the tooltip programmatically.

//The argument determines whether the tooltip should be animated while hiding.

tooltip.Hide();