Tooltip in .NET MAUI Pyramid Chart

8 Jul 20266 minutes to read

The tooltip provides additional information when hovering over a pyramid segment. By default, the segment’s Y value will be shown in the tooltip.

NOTE

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

Enable Tooltip

To enable the tooltip in the chart, set the EnableTooltip property of SfPyramidChart to true.

XAML

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                      XBindingPath="XValue" 
                      YBindingPath="YValue"
                      EnableTooltip="True">
</chart:SfPyramidChart>

C#

SfPyramidChart chart = new SfPyramidChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableTooltip = true;

this.Content = chart;

Tooltip Customization

The ChartTooltipBehavior is used to customize the tooltip. To customize the tooltip, create an instance of ChartTooltipBehavior and set it to the TooltipBehavior property of SfPyramidChart. The following properties are used to customize the tooltip:

• Background of type Brush — indicates the background color of 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.
• Stroke of type Brush — indicates the border color of the tooltip.
• StrokeWidth of type double — indicates the thickness of the tooltip border.
• UseSeriesFillColor of type bool — indicates whether the tooltip background should use the fill color of the associated segment; when true, the tooltip adopts the segment color as its background.

XAML

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                      XBindingPath="XValue" 
                      YBindingPath="YValue"
                      EnableTooltip="True">
    <chart:SfPyramidChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Duration="4"/>
    </chart:SfPyramidChart.TooltipBehavior>
</chart:SfPyramidChart>

C#

SfPyramidChart chart = new SfPyramidChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableTooltip = true;
chart.TooltipBehavior = new ChartTooltipBehavior()
{
    Duration = 4,
};

this.Content = chart;

Tooltip Template

TooltipTemplate is used to customize the tooltip with additional information beyond the default display. The template binding context is the chart segment’s TooltipInfo object, which contains an Item property for the data point.

XAML

<Grid x:Name="grid">
    <Grid.Resources>
        <DataTemplate x:Key="tooltipTemplate">
            <HorizontalStackLayout Padding="8" Spacing="4">
                <Label Text="{Binding Item.XValue}"
                       TextColor="White"
                       FontAttributes="Bold"
                       VerticalOptions="Center"/>
                <Label Text="{Binding Item.YValue, StringFormat=': {0}'}"
                       TextColor="White"
                       FontAttributes="Bold"
                       VerticalOptions="Center"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </Grid.Resources>

    <chart:SfPyramidChart ItemsSource="{Binding Data}" 
                          XBindingPath="XValue" 
                          YBindingPath="YValue"
                          EnableTooltip="True"
                          TooltipTemplate="{StaticResource tooltipTemplate}">
    </chart:SfPyramidChart>
</Grid>

C#

SfPyramidChart chart = new SfPyramidChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableTooltip = true;
chart.TooltipTemplate = grid.Resources["tooltipTemplate"] as DataTemplate;

grid.Children.Add(chart);
this.Content = grid;