.NET MAUI PieChart Tooltip

Updated on Nov 9, 2026

The Telerik UI for .NET MAUI PieChart displays a tooltip with information about a slice when you add a ChartTooltipBehavior to the ChartBehaviors collection of the chart. The tooltip works with the PieSeries and the DonutSeries.

Enable the Tooltip

Add a ChartTooltipBehavior to the ChartBehaviors collection of the RadPieChart:

XAML

<charts:RadPieChart x:Name="chart">
    <charts:RadPieChart.ChartBehaviors>
        <charts:ChartTooltipBehavior x:Name="tooltipBehavior"
                                     TooltipOpening="OnTooltipOpening" />
    </charts:RadPieChart.ChartBehaviors>
</charts:RadPieChart>

Add the charts namespace:

XAML

xmlns:charts="clr-namespace:Telerik.Maui.Controls.Charts;assembly=Telerik.Maui.Controls"

Display the Tooltip

To open the tooltip, set the TriggerMode (enum of type Telerik.Maui.Controls.Charts.ChartTooltipTriggerMode) property of the ChartTooltipBehavior. The available options are:

• Tap—The tooltip opens when you tap a data point. Default on mobile platforms.
• Hover—The tooltip opens when you hover over a data point. Default on desktop platforms.
• Hold—The tooltip opens when you press and hold a data point.

To define a delay before the tooltip is shown or hidden, use the following properties of the ChartTooltipBehavior:

• HoverDelay (int)—Defines the delay in milliseconds before the tooltip is shown. Applies only to the Hover trigger mode and only to the initial show. The default value is 0.
• HideDelay (int)—Defines the delay in milliseconds before the tooltip is hidden. For the Hold trigger mode, the delay starts when the press is released. This property has no effect for the Hover trigger mode.

Position the Tooltip

To position the tooltip, use the PlacementMode (enum of type Telerik.Maui.Controls.Charts.ChartTooltipPlacementMode) property. The available options are:

• Pointer (default)—Places the tooltip at the pointer or tap position.
• DataPoint—Places the tooltip at a fixed position relative to the data point.

Format the Tooltip Label

To format the value displayed in the tooltip, use the TooltipLabelFormat (string) property of the ChartTooltipBehavior. The format string is applied to the value of the data point. For example, to display a percentage with two decimal places, set the TooltipLabelFormat to "{0:P2}".

Events

The ChartTooltipBehavior exposes the TooltipOpening event, which is raised before the tooltip opens. The ChartTooltipOpeningEventArgs expose the Series, SeriesIndex, PointIndex, DataItem, Value, Category, FormattedValue, and SeriesColor properties, and the AdditionalData property, which you can set to pass custom data to the TooltipContentTemplate.

The following example calculates the difference between the actual value and a target value and passes it to the tooltip:

C#

private void OnTooltipOpening(object sender, ChartTooltipOpeningEventArgs e)
{
    if (e.DataItem is not PieDonutTooltipPoint point)
    {
        return;
    }

    double percentage = ((point.Value - point.Target) / point.Target) * 100.0;
    string sign = percentage >= 0.0 ? "+" : string.Empty;
    string formattedPercentage = percentage.ToString("0", CultureInfo.InvariantCulture);
    e.AdditionalData = new PieDonutTooltipInfo($"{sign}{formattedPercentage}% vs target");
}

public sealed record PieDonutTooltipPoint(string Category, double Value, double Target, string Region, int Units);

public sealed record PieDonutTooltipInfo(string VsTarget);

Styling the Tooltip

Use the TooltipStyle property of the ChartTooltipBehavior to apply a Style with target type ChartTooltip. Set the following properties to style the tooltip's appearance:

• TextColor (Color)—Defines the color of the tooltip text.
• FontSize (double)—Defines the font size of the tooltip text.
• FontFamily (string)—Defines the font family of the tooltip text.
• FontAttributes (FontAttributes)—Defines the font attributes of the tooltip text.
• BackgroundColor (Color)—Defines the background color of the tooltip.
• Border properties (BorderColor, BorderBrush BorderThickness, CornerRadius)—Define the border of the tooltip.
• ContentPadding (Thickness)—Defines the padding of the tooltip content.

XAML

<Style x:Key="TooltipStyle"
       TargetType="charts:ChartTooltip">
    <Setter Property="BackgroundColor" Value="#E8F5E9" />
    <Setter Property="BorderColor" Value="#2E7D32" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="ContentPadding" Value="12,8" />
    <Setter Property="TextColor" Value="#1B5E20" />
</Style>

C#

this.tooltipBehavior.TooltipStyle = (Style)this.Resources["TooltipStyle"];

Customizing the Tooltip Content

Use the TooltipContentTemplate property to define custom content. The following template displays the series color and name, properties from the business object, the formatted value, and the AdditionalData set in the TooltipOpening event:

XAML

<DataTemplate x:Key="TooltipContentTemplate"
              x:DataType="charts:ChartTooltipContext">
    <VerticalStackLayout Spacing="6">
        <HorizontalStackLayout Spacing="8">
            <BoxView Color="{Binding SeriesColor}"
                     WidthRequest="12"
                     HeightRequest="12"
                     VerticalOptions="Center" />
            <Label Text="{Binding Series.DisplayName}"
                   FontAttributes="Bold"
                   VerticalOptions="Center" />
        </HorizontalStackLayout>
        <VerticalStackLayout BindingContext="{Binding DataItem}"
                             x:DataType="local:PieDonutTooltipPoint"
                             Spacing="2">
            <Label Text="{Binding Category}"
                   FontSize="12" />
            <Label Text="{Binding Region}" />
            <Label Text="{Binding Units, StringFormat='Units: {0}'}" />
        </VerticalStackLayout>
        <Label Text="{Binding FormattedValue}"
               FontSize="18"
               FontAttributes="Bold" />
        <VerticalStackLayout BindingContext="{Binding AdditionalData}"
                             x:DataType="local:PieDonutTooltipInfo">
            <Label Text="{Binding VsTarget}"
                   FontAttributes="Bold" />
        </VerticalStackLayout>
    </VerticalStackLayout>
</DataTemplate>

C#

this.tooltipBehavior.TooltipContentTemplate = (DataTemplate)this.Resources["TooltipContentTemplate"];

Customizing the Tooltip Control Template

To fully change the tooltip appearance, set the ControlTemplate property of the ChartTooltip through the TooltipStyle. Use a ContentPresenter to display the tooltip content, and bind to the ChartTooltip text properties through a RelativeSource binding:

XAML

<ControlTemplate x:Key="TooltipControlTemplate">
    <Grid>
        <Grid.Resources>
            <Style TargetType="Label">
                <Setter Property="TextColor"
                        Value="{Binding TextColor, Source={RelativeSource AncestorType={x:Type charts:ChartTooltip}}, x:DataType=charts:ChartTooltip}" />
                <Setter Property="FontSize"
                        Value="{Binding FontSize, Source={RelativeSource AncestorType={x:Type charts:ChartTooltip}}, x:DataType=charts:ChartTooltip}" />
                <Setter Property="FontFamily"
                        Value="{Binding FontFamily, Source={RelativeSource AncestorType={x:Type charts:ChartTooltip}}, x:DataType=charts:ChartTooltip}" />
                <Setter Property="FontAttributes"
                        Value="{Binding FontAttributes, Source={RelativeSource AncestorType={x:Type charts:ChartTooltip}}, x:DataType=charts:ChartTooltip}" />
            </Style>
        </Grid.Resources>
        <telerik:RadBorder BackgroundColor="#F3E5F5"
                           BorderColor="#7B1FA2"
                           BorderThickness="2"
                           CornerRadius="12">
            <ContentPresenter Margin="10" />
        </telerik:RadBorder>
    </Grid>
</ControlTemplate>

<Style x:Key="TooltipControlTemplateStyle"
       TargetType="charts:ChartTooltip">
    <Setter Property="ControlTemplate" Value="{StaticResource TooltipControlTemplate}" />
</Style>

C#

this.tooltipBehavior.TooltipStyle = (Style)this.Resources["TooltipControlTemplateStyle"];

See Also

• Pie Series
• CartesianChart Tooltip