Tooltip in .NET MAUI Chart

18 Oct 20244 minutes to read

The tooltip helps in providing additional information while hovering over the funnel segment. By default, the value of the funnel process (Y value) will be shown in the tooltip.

Enable Tooltip

To define the tooltip in the chart, set the EnableTooltip property of SfFunnelChart to true.

<chart:SfFunnelChart EnableTooltip="True">
    . . .
</chart:SfFunnelChart>
SfFunnelChart chart = new SfFunnelChart();
. . .      
chart.EnableTooltip = true;
this.Content = chart;

Tooltip support 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 SfFunnelChart. The following properties are used to customize the tooltip:

  • Background of type Brush, indicates background color to the tooltip label.
  • FontAttributes of type FontAttributes, indicates the font style of the label.
  • FontFamily of type string, indicates the font family for the label.
  • FontSize of type float, indicates the font size.
  • Duration of type int, indicates the duration for displaying the tooltip.
  • Margin of type Thickness, indicates the label’s margin.
  • TextColor of type Color, indicates the color of the displayed text.
<chart:SfFunnelChart EnableTooltip="True">
    . . .
    <chart:SfFunnelChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Duration="4"/>
    </chart:SfFunnelChart.TooltipBehavior>
</chart:SfFunnelChart>
SfFunnelChart chart = new SfFunnelChart();
. . .
chart.EnableTooltip = true;
chart.TooltipBehavior = new ChartTooltipBehavior()
{
    Duration = 4,
};
. . .
this.Content = chart;

Tooltip Template

TooltipTemplate is used to show additional information other than the default UI.

<Grid x:Name="grid">
    <Grid.Resources>
        <DataTemplate x:Key="tooltipTemplate">
            <StackLayout Orientation="Horizontal">
                <Label Text="{Binding Item.XValue}"
                       TextColor="White"
                       FontAttributes="Bold"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
                <Label Text="{Binding Item.YValue,StringFormat=': {0}'}"
                       TextColor="White"
                       FontAttributes="Bold"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
            </StackLayout>
        </DataTemplate>
    </Grid.Resources>

    <chart:SfFunnelChart EnableTooltip="True"
                         TooltipTemplate="{StaticResource tooltipTemplate}">
	. . .
    </chart:SfFunnelChart>
</Grid>
SfFunnelChart chart = new SfFunnelChart();
. . .
chart.EnableTooltip = true;
chart.TooltipTemplate= grid.Resources["tooltipTemplate"] as DataTemplate;
. . .
this.Content = chart;

Tooltip template in MAUI Chart