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.OnDoubleTapped(DoubleTappedRoutedEventArgs)

ChartBehavior.OnHolding(HoldingRoutedEventArgs)

ChartBehavior.OnLayoutUpdated()

ChartBehavior.OnManipulationCompleted(ManipulationCompletedRoutedEventArgs)

ChartBehavior.OnManipulationDelta(ManipulationDeltaRoutedEventArgs)

ChartBehavior.OnManipulationStarted(ManipulationStartedRoutedEventArgs)

ChartBehavior.OnPointerEntered(PointerRoutedEventArgs)

ChartBehavior.OnPointerExited(PointerRoutedEventArgs)

ChartBehavior.OnPointerMoved(PointerRoutedEventArgs)

ChartBehavior.OnPointerPressed(PointerRoutedEventArgs)

ChartBehavior.OnPointerReleased(PointerRoutedEventArgs)

ChartBehavior.OnPointerWheelChanged(PointerRoutedEventArgs)

ChartBehavior.OnRightTapped(RightTappedRoutedEventArgs)

ChartBehavior.OnTapped(TappedRoutedEventArgs)

Namespace: Syncfusion.UI.Xaml.Charts

Assembly: Syncfusion.Chart.WinUI.dll

Syntax

public class ChartTooltipBehavior : ChartBehavior

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:

LabelStyle - To customize the appearance of the tooltip label, refer to the LabelStyle property.

Style - To customize the appearance of tooltips, refer to the Style property.

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

EnableAnimation - To indicate the animation for the tooltip, refer to the EnableAnimation property.

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior/>
    </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();

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

Constructors

ChartTooltipBehavior()

Initializes a new instance of the ChartTooltipBehavior.

Declaration

public ChartTooltipBehavior()

Fields

DurationProperty

Identifies the Duration dependency property.

Declaration

public static readonly DependencyProperty DurationProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the Duration dependency property.

EnableAnimationProperty

Identifies the EnableAnimation dependency property.

Declaration

public static readonly DependencyProperty EnableAnimationProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the EnableAnimation dependency property.

HorizontalAlignmentProperty

Identifies the HorizontalAlignment dependency property.

Declaration

public static readonly DependencyProperty HorizontalAlignmentProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the HorizontalAlignment dependency property.

HorizontalOffsetProperty

Identifies the HorizontalOffset dependency property.

Declaration

public static readonly DependencyProperty HorizontalOffsetProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the HorizontalOffset dependency property.

InitialShowDelayProperty

Identifies the InitialShowDelay dependency property.

Declaration

public static readonly DependencyProperty InitialShowDelayProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the InitialShowDelay dependency property.

LabelStyleProperty

Identifies the LabelStyle dependency property.

Declaration

public static readonly DependencyProperty LabelStyleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the LabelStyle dependency property.

StyleProperty

Identifies the Style dependency property.

Declaration

public static readonly DependencyProperty StyleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the Style dependency property.

VerticalAlignmentProperty

Identifies the VerticalAlignment dependency property.

Declaration

public static readonly DependencyProperty VerticalAlignmentProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the VerticalAlignment dependency property.

VerticalOffsetProperty

Identifies the VerticalOffset dependency property.

Declaration

public static readonly DependencyProperty VerticalOffsetProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the VerticalOffset dependency property.

Properties

Duration

Gets or sets the value that indicates how long the tooltip will be visible.

Declaration

public int Duration { get; set; }

Property Value

Type	Description
System.Int32	It accepts the integer values and the default value is 1000 milliseconds.

Remarks

This property specifies how long a tooltip remains visible while the user moves the mouse pointer over the chart series area.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Duration ="1500"/>
    </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 = 1500,
};

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

EnableAnimation

Gets or sets the value that indicates whether the animation is enabled when the tooltip is displayed.

Declaration

public bool EnableAnimation { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the bool values and the default value is `true`.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior EnableAnimation="True"/>
    </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()
{
   EnableAnimation = true,
};

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

HorizontalAlignment

Gets or sets the horizontal alignment for the tooltip.

Declaration

public HorizontalAlignment HorizontalAlignment { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.HorizontalAlignment	It accepts the Microsoft.UI.Xaml.HorizontalAlignment value and the default value is Microsoft.UI.Xaml.HorizontalAlignment.Center.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior HorizontalAlignment ="Right"/>
    </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()
{
   HorizontalAlignment = HorizontalAlignment.Right,
};

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

HorizontalOffset

Gets or sets the value to position the tooltip horizontally.

Declaration

public double HorizontalOffset { get; set; }

Property Value

Type	Description
System.Double	It accepts the double values and the default value is 0.

Remarks

The HorizontalOffset and the VerticalOffset property values provide additional adjustment to position the tooltip.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior HorizontalOffset ="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()
{
   HorizontalOffset = 5,
};

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

InitialShowDelay

Gets or sets the delay in milliseconds to show the tooltip once the user interacts with the series.

Declaration

public int InitialShowDelay { get; set; }

Property Value

Type	Description
System.Int32	It accepts the integer values and the default value is 0 milliseconds.

Remarks

It specifies the amount of time the user must wait in milliseconds before the tooltip appears when hovering the mouse or touching a chart series.

Note: Initial delay only works for the positive values.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior InitialShowDelay ="500"/>
    </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()
{
   InitialShowDelay = 500,
};

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

LabelStyle

Gets or sets the style to customize the appearance of tooltip label.

Declaration

public Style LabelStyle { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Style	It accepts `Style` for the tooltip label.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior>
            <chart:ChartTooltipBehavior.LabelStyle>
               <Style TargetType = "TextBlock" >
                   <Setter Property ="FontSize" Value="14"/>
                   <Setter Property ="Foreground" Value="Red"/>
                   <Setter Property ="FontStyle" Value="Italic"/>
               </Style>
           </chart:ChartTooltipBehavior.LabelStyle>
        </chart:ChartTooltipBehavior>
    </chart:SfCartesianChart.TooltipBehavior>

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

</chart:SfCartesianChart>

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

var labelStyle = new Style() { TargetType = typeof(TextBlock) };
labelStyle.Setters.Add(new Setter(TextBlock.FontSizeProperty, 14));
labelStyle.Setters.Add(new Setter(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Red)));
labelStyle.Setters.Add(new Setter(TextBlock.FontStyleProperty, FontStyle.Italic));
chart.TooltipBehavior = new ChartTooltipBehavior()
{
.    LabelStyle = labelStyle,
};

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

Style

Gets or sets the style to customize the appearance of tooltip.

Declaration

public Style Style { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Style	It accepts `Style` for tooltip.

Remarks

It's used to customize the fill and stroke of the tooltip.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior>
            <chart:ChartTooltipBehavior.Style>
               <Style TargetType = "Path">
                   <Setter Property="Stroke" Value="Black" />
                   <Setter Property ="Fill" Value="LightGreen" />
               </Style>
            </chart:ChartTooltipBehavior.Style>
        </chart:ChartTooltipBehavior>
    </chart:SfCartesianChart.TooltipBehavior>

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

</chart:SfCartesianChart>

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

var style = new Style() { TargetType = typeof(Path) };
style.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Black)));
style.Setters.Add(new Setter(Path.FillProperty, new SolidColorBrush(Colors.Black)));
chart.TooltipBehavior = new ChartTooltipBehavior()
{
    Style = style,
};

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

VerticalAlignment

Gets or sets the vertical alignment for the tooltip.

Declaration

public VerticalAlignment VerticalAlignment { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.VerticalAlignment	It accepts the Microsoft.UI.Xaml.VerticalAlignment value and the default value is Microsoft.UI.Xaml.VerticalAlignment.Top.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior VerticalAlignment ="Center"/>
    </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()
{
   VerticalAlignment = VerticalAlignment.Center,
};

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

VerticalOffset

Gets or sets the value to position the tooltip vertically.

Declaration

public double VerticalOffset { get; set; }

Property Value

Type	Description
System.Double	It accepts the double values and the default value is 0.

Remarks

The HorizontalOffset and the VerticalOffset property values provide additional adjustment to position the tooltip.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.TooltipBehavior>
        <chart:ChartTooltipBehavior VerticalOffset ="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()
{
   VerticalOffset = 5,
};

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