menu

MAUI Toolkit

  • User Guide
  • Demos
  • Support
Class ChartTooltipBehavior - MAUI-ToolKit API Reference | Syncfusion

    Show / Hide Table of Contents

    Class ChartTooltipBehavior

    ChartTooltipBehavior is often used to specify extra information when the mouse pointer moved over an element.

    Inheritance
    System.Object
    ChartBehavior
    ChartTooltipBehavior
    Inherited Members
    ChartBehavior.OnTouchDown(ChartBase, Single, Single)
    Namespace: Syncfusion.Maui.Toolkit.Charts
    Assembly: Syncfusion.Maui.Toolkit.dll
    Syntax
    public class ChartTooltipBehavior : ChartBehavior, IParentThemeElement, IThemeElement
    Remarks

    The tooltip displays information while tapping or mouse hovering on the segment. To display the tooltip on the chart, you need to set the EnableTooltip property as true in chart series.

    Create an instance of the ChartTooltipBehavior and set it to the chart’s TooltipBehavior property.

    It provides the following options to customize the appearance of the tooltip:

    Label Customization - To customize the appearance of the tooltip, refer to the TextColor, FontSize, FontAttributes, and FontFamily properties.

    Duration - To show the tooltip with delay and indicate how long the tooltip will be visible, refer to the Duration property.

    Examples
    • Xaml
    • C#
        <chart:SfCartesianChart>
    
              <chart:SfCartesianChart.ChartBehaviors>
                  <chart:ChartTooltipBehavior />
              </chart:SfCartesianChart.ChartBehaviors>
    
        </chart:SfCartesianChart>
        SfCartesianChart chart = new SfCartesianChart();
    
        ChartTooltipBehavior tooltipBehavior = new ChartTooltipBehavior();
        chart.ChartBehaviors.Add(tooltipBehavior);

    Constructors

    ChartTooltipBehavior()

    Initializes a new instance of the ChartTooltipBehavior class.

    Declaration
    public ChartTooltipBehavior()

    Fields

    BackgroundProperty

    Identifies the Background bindable property.

    Declaration
    public static readonly BindableProperty BackgroundProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The identifier for the Background bindable property determines the background brush of the chart tooltip.

    DurationProperty

    Identifies the Duration bindable property.

    Declaration
    public static readonly BindableProperty DurationProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The identifier for the Duration bindable property determines the duration for which the chart tooltip is displayed.

    FontAttributesProperty

    Identifies the FontAttributes bindable property.

    Declaration
    public static readonly BindableProperty FontAttributesProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The identifier for the FontAttributes bindable property determines the font attributes (e.g., bold, italic) of the chart tooltip text.

    FontFamilyProperty

    Identifies the FontFamily bindable property.

    Declaration
    public static readonly BindableProperty FontFamilyProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The identifier for the FontFamily bindable property determines the font family of the chart tooltip text.

    FontSizeProperty

    Identifies the FontSize bindable property.

    Declaration
    public static readonly BindableProperty FontSizeProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The identifier for the FontSize bindable property determines the font size of the chart tooltip text.

    MarginProperty

    Identifies the Margin bindable property.

    Declaration
    public static readonly BindableProperty MarginProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The identifier for the Margin bindable property determines the margin around the chart tooltip.

    TextColorProperty

    Identifies the TextColor bindable property.

    Declaration
    public static readonly BindableProperty TextColorProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The identifier for the TextColor bindable property determines the text color of the chart tooltip.

    Properties

    Background

    Gets or sets the brush value to customize the tooltip background.

    Declaration
    public Brush Background { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    It accepts the Microsoft.Maui.Controls.Brush value and the default value is Black.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfCartesianChart>
    
        <!--omitted for brevity-->
    
        <chart:SfCartesianChart.TooltipBehavior>
            <chart:ChartTooltipBehavior Background ="Red"/>
        </chart:SfCartesianChart.TooltipBehavior>
    
        <chart:LineSeries ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          EnableTooltip="True"/>
    
    </chart:SfCartesianChart>
    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();
    
    // omitted for brevity
    chart.TooltipBehavior = new ChartTooltipBehavior()
    {
       Background = new SolidColorBrush(Colors.Red)
    };
    
    LineSeries series = new LineSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       EnableTooltip = true
    };
    chart.Series.Add(series);

    Duration

    Gets or sets a value to specify the duration time in seconds for which tooltip will be displayed.

    Declaration
    public int Duration { get; set; }
    Property Value
    Type Description
    System.Int32

    It accepts the int> values and the default value is 2.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfCartesianChart>
    
        <!--omitted for brevity-->
    
        <chart:SfCartesianChart.TooltipBehavior>
            <chart:ChartTooltipBehavior Duration ="3"/>
        </chart:SfCartesianChart.TooltipBehavior>
    
        <chart:LineSeries ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          EnableTooltip="True"/>
    
    </chart:SfCartesianChart>
    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();
    
    // omitted for brevity
    chart.TooltipBehavior = new ChartTooltipBehavior()
    {
       Duration = 3
    };
    
    LineSeries series = new LineSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       EnableTooltip = true
    };
    chart.Series.Add(series);

    FontAttributes

    Gets or sets a value to specify the FontAttributes for the tooltip label.

    Declaration
    public FontAttributes FontAttributes { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.FontAttributes

    It accepts Microsoft.Maui.Controls.FontAttributes values and the default value is Microsoft.Maui.Controls.FontAttributes.None.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfCartesianChart>
    
        <!--omitted for brevity-->
    
        <chart:SfCartesianChart.TooltipBehavior>
            <chart:ChartTooltipBehavior FontAttributes="Bold"/>
        </chart:SfCartesianChart.TooltipBehavior>
    
        <chart:LineSeries ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          EnableTooltip="True"/>
    
    </chart:SfCartesianChart>
    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();
    
    // omitted for brevity
    chart.TooltipBehavior = new ChartTooltipBehavior()
    {
       FontAttributes = FontAttributes.Bold;
    };
    
    LineSeries series = new LineSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       EnableTooltip = true
    };
    chart.Series.Add(series);

    FontFamily

    Gets or sets a value to specify the FontFamily for the tooltip label.

    Declaration
    public string FontFamily { get; set; }
    Property Value
    Type Description
    System.String

    It accepts string values and its default value is null.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfCartesianChart>
    
        <!--omitted for brevity-->
    
        <chart:SfCartesianChart.TooltipBehavior>
            <chart:ChartTooltipBehavior FontFamily ="OpenSansRegular"/>
        </chart:SfCartesianChart.TooltipBehavior>
    
        <chart:LineSeries ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          EnableTooltip="True"/>
    
    </chart:SfCartesianChart>
    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();
    
    // omitted for brevity
    chart.TooltipBehavior = new ChartTooltipBehavior()
    {
       FontFamily = "OpenSansRegular",
    };
    
    LineSeries series = new LineSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       EnableTooltip = true
    };
    chart.Series.Add(series);

    FontSize

    Gets or sets a value to change the label's text size.

    Declaration
    public float FontSize { get; set; }
    Property Value
    Type Description
    System.Single

    It accepts the float values and the default value is 14.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfCartesianChart>
    
        <!--omitted for brevity-->
    
        <chart:SfCartesianChart.TooltipBehavior>
            <chart:ChartTooltipBehavior FontSize ="20"/>
        </chart:SfCartesianChart.TooltipBehavior>
    
        <chart:LineSeries ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          EnableTooltip="True"/>
    
    </chart:SfCartesianChart>
    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();
    
    // omitted for brevity
    chart.TooltipBehavior = new ChartTooltipBehavior()
    {
       FontSize = 20,
    };
    
    LineSeries series = new LineSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       EnableTooltip = true
    };
    chart.Series.Add(series);

    Margin

    Gets or sets a thickness value to adjust the tooltip margin.

    Declaration
    public Thickness Margin { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Thickness

    It accepts the Microsoft.Maui.Thickness values and the default value is 0.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfCartesianChart>
    
        <!--omitted for brevity-->
    
        <chart:SfCartesianChart.TooltipBehavior>
            <chart:ChartTooltipBehavior Margin ="5"/>
        </chart:SfCartesianChart.TooltipBehavior>
    
        <chart:LineSeries ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          EnableTooltip="True"/>
    
    </chart:SfCartesianChart>
    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();
    
    // omitted for brevity
    chart.TooltipBehavior = new ChartTooltipBehavior()
    {
       Margin = new Thickness(5),
    };
    
    LineSeries series = new LineSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       EnableTooltip = true
    };
    chart.Series.Add(series);

    TextColor

    Gets or sets the color value to customize the text color of the tooltip label.

    Declaration
    public Color TextColor { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Graphics.Color

    It accepts the Microsoft.Maui.Graphics.Color values and the default value is White.

    Examples
    • MainPage.xaml
    • MainPage.xaml.cs
    <chart:SfCartesianChart>
    
        <!--omitted for brevity-->
    
        <chart:SfCartesianChart.TooltipBehavior>
            <chart:ChartTooltipBehavior TextColor ="Red"/>
        </chart:SfCartesianChart.TooltipBehavior>
    
        <chart:LineSeries ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          EnableTooltip="True"/>
    
    </chart:SfCartesianChart>
    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();
    
    // omitted for brevity
    chart.TooltipBehavior = new ChartTooltipBehavior()
    {
       TextColor = Colors.Red,
    };
    
    LineSeries series = new LineSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       EnableTooltip = true
    };
    chart.Series.Add(series);

    Methods

    Hide()

    Hides the tooltip view.

    Declaration
    public void Hide()

    OnTouchMove(ChartBase, Single, Single)

    This method is triggered when a touch point is moved along the touch surface.

    Declaration
    protected override void OnTouchMove(ChartBase chart, float pointX, float pointY)
    Parameters
    Type Name Description
    ChartBase chart
    System.Single pointX
    System.Single pointY
    Overrides
    ChartBehavior.OnTouchMove(ChartBase, Single, Single)
    Remarks

    Use the provided points X and Y to determine the exact location of the touch.

    You can use these coordinates to define the desired actions to be executed when navigating the touch point across the chart area.

    Example code:

    Convert the touch coordinates to value coordinates if needed.
     
    chart.ChartPointToValue(xAxis, pointY);
    Show a tooltip with information about the data point.
    tooltipBehavior.Show(pointX, pointY);

    OnTouchUp(ChartBase, Single, Single)

    This method is triggered when a touch event comes to an end. It is used to finalize the action initiated by the OnTouchDown(ChartBase, Single, Single).

    Declaration
    protected override void OnTouchUp(ChartBase chart, float pointX, float pointY)
    Parameters
    Type Name Description
    ChartBase chart
    System.Single pointX
    System.Single pointY
    Overrides
    ChartBehavior.OnTouchUp(ChartBase, Single, Single)
    Remarks

    Use the provided points X and Y to determine the exact location of the touch.

    You can use these coordinates to interact with the chart, such as highlighting data points, hiding tooltips, or performing other actions when the touch is released.

    Example code:

    Convert the touch coordinates to value coordinates if needed.
     
    chart.ChartPointToValue(xAxis, pointY);
    Hide a tooltip with information about the data point.
    tooltipBehavior.Hide(pointX, pointY);

    Show(Single, Single, Boolean)

    Method used to show tooltip view at nearest datapoint for given x and y value.

    Declaration
    public void Show(float pointX, float pointY, bool canAnimate)
    Parameters
    Type Name Description
    System.Single pointX
    System.Single pointY
    System.Boolean canAnimate
    Back to top Generated by DocFX
    OSZAR »
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved
    OSZAR »