.NET MAUI Charts (New) CartesianChart Tooltip

New to Telerik UI for .NET MAUI? Start a free 30-day trial

Updated on Nov 9, 2026

The Telerik UI for .NET MAUI CartesianChart displays a tooltip with information about a data point when you add a ChartTooltipBehavior to the ChartBehaviors collection of the chart. The tooltip works with all Cartesian series: AreaSeries, BarSeries, CandlestickSeries, LineSeries, OhlcSeries, PointSeries, SplineAreaSeries, and SplineSeries.

Add a ChartTooltipBehavior to the ChartBehaviors collection of the RadCartesianChart:

XAML

<charts:RadCartesianChart x:Name="chart">
    <charts:RadCartesianChart.ChartBehaviors>
        <charts:ChartTooltipBehavior x:Name="tooltipBehavior"
                                     TooltipOpening="OnTooltipOpening" />
    </charts:RadCartesianChart.ChartBehaviors>
    <charts:RadCartesianChart.Axes>
        <charts:CategoricalAxis x:Name="categoricalAxis"
                                Location="Bottom" />
        <charts:NumericalAxis x:Name="numericalAxis"
                              Location="Left" />
    </charts:RadCartesianChart.Axes>
</charts:RadCartesianChart>

Add the charts namespace:

XAML

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

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.

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.

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 TooltipOpening event provides two parameters:

The sender, which is of type object.
The ChartTooltipOpeningEventArgs, which provides information about the Series, SeriesIndex, PointIndex, DataItem, Value, Category, FormattedValue, and SeriesColor properties, and the AdditionalData property.

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

private void OnTooltipOpening(object sender, ChartTooltipOpeningEventArgs e)
{
    if (e.DataItem is not CartesianTooltipPoint 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 CartesianTooltipInfo($"{sign}{formattedPercentage}% vs target");
}


public sealed record CartesianTooltipPoint(
    string Category,
    DateTime Date,
    double Value,
    double Target,
    double Open,
    double High,
    double Low,
    double Close,
    string Region,
    int Units);

public sealed record CartesianTooltipInfo(string VsTarget);

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="#FFF3E0" />
    <Setter Property="BorderColor" Value="#E65100" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="ContentPadding" Value="12,8" />
    <Setter Property="TextColor" Value="#4E342E" />
</Style>

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

Use the TooltipContentTemplate property to define custom content. The following template displays the series color and name, the category, 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 Spacing="2">
            <Label Text="{Binding Category, StringFormat='{}{0:MMM d}'}"
                   FontSize="12" />
            <VerticalStackLayout BindingContext="{Binding DataItem}"
                                 x:DataType="local:CartesianTooltipPoint"
                                 Spacing="2">
                <Label Text="{Binding Region}" />
                <Label Text="{Binding Units, StringFormat='Units: {0}'}" />
            </VerticalStackLayout>
        </VerticalStackLayout>
        <Label Text="{Binding FormattedValue}"
               FontSize="18"
               FontAttributes="Bold" />
        <VerticalStackLayout BindingContext="{Binding AdditionalData}"
                             x:DataType="local:CartesianTooltipInfo">
            <Label Text="{Binding VsTarget}"
                   FontAttributes="Bold" />
        </VerticalStackLayout>
    </VerticalStackLayout>
</DataTemplate>

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

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="Black" />
                <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="#E3F2FD"
                            BorderColor="#1565C0"
                            BorderThickness="2"
                            CornerRadius="8">
            <ContentPresenter Margin="10" />
        </telerik:RadBorder>
    </Grid>
</ControlTemplate>

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

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

.NET MAUI CartesianChart Tooltip

Enable the Tooltip

Display the Tooltip

Position the Tooltip

Format the Tooltip Label

Events

Styling the Tooltip

Customizing the Tooltip Content

Customizing the Tooltip Control Template

See Also