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.Charts

Assembly: Syncfusion.Maui.Charts.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

DurationProperty

Identifies the Duration bindable property.

Declaration

public static readonly BindableProperty DurationProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

FontAttributesProperty

Identifies the FontAttributes bindable property.

Declaration

public static readonly BindableProperty FontAttributesProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

FontFamilyProperty

Identifies the FontFamily bindable property.

Declaration

public static readonly BindableProperty FontFamilyProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

FontSizeProperty

Identifies the FontSize bindable property.

Declaration

public static readonly BindableProperty FontSizeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

MarginProperty

Identifies the Margin bindable property.

Declaration

public static readonly BindableProperty MarginProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

StrokeWidthProperty

Identifies the StrokeWidth bindable property.

Declaration

public static readonly BindableProperty StrokeWidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

TextColorProperty

Identifies the TextColor bindable property.

Declaration

public static readonly BindableProperty TextColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

UseSeriesFillColorProperty

Identifies the UseSeriesFillColor bindable property.

Declaration

public static readonly BindableProperty UseSeriesFillColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

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 integer 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.

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.

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

Stroke

Gets or sets the brush value to customize the tooltip border color.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	It accepts the Microsoft.Maui.Controls.Brush value and the default value is Transparent. The tooltip border is only rendered when both Stroke is set and StrokeWidth is greater than 0.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Stroke="Blue" StrokeWidth="2"/>
    </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()
{
   Stroke = new SolidColorBrush(Colors.Blue),
   StrokeWidth = 2
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
   EnableTooltip = true
};
chart.Series.Add(series);

StrokeWidth

Gets or sets a value to specify the tooltip border thickness.

Declaration

public double StrokeWidth { get; set; }

Property Value

Type	Description
System.Double	It accepts the float values and the default value is 0. The tooltip border is only rendered when both Stroke is set and StrokeWidth is greater than 0.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Stroke="Blue" StrokeWidth="2"/>
    </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()
{
   Stroke = new SolidColorBrush(Colors.Blue),
   StrokeWidth = 2
};

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

UseSeriesFillColor

Gets or sets a value indicating whether the tooltip background matches the associated series fill color.

Declaration

public bool UseSeriesFillColor { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and the default value is `false`. When set to `true`, the tooltip background uses the series fill color; otherwise, it uses the Background property.

Remarks

Enabling this property improves visual association between the tooltip and its corresponding series, especially in multi-series charts.

If the Background property is explicitly set, it takes precedence over the series fill color.

For gradient fills, the tooltip uses the primary (first gradient stop) color as a solid color.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!-- omitted for brevity -->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior UseSeriesFillColor="True"/>
    </chart:SfCartesianChart.TooltipBehavior>

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

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

chart.TooltipBehavior = new ChartTooltipBehavior()
{
    UseSeriesFillColor = true
};

ColumnSeries series = new ColumnSeries()
{
    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)

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)

OnTouchUp(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)

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