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.

    <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);

Type	Description
System.Single	It accepts the float values and the default value is 14.

<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