Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Item Tooltip Layer

Purpose

This topic provides information about the item tooltip layer which is used for hover interactions in the Category Series. It describes the properties of the item tooltip layer and also provides an example of its implementation.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

The XamDataChart control requires a data object model to be mapped to control’s DataContext property. This article will provide a simple data object model but you can create your own and use it with this sample code instead.

This topic explains various types of Category Series in the XamDataChart control.

In this topic

This topic contains the following sections:

Overview

Item tooltip layer overview

The ItemToolTipLayer displays tooltips for all the series on the XamDataChart control individually when a pointer hovers over that particular series.

The tooltip style is inherited from the chart. However, you can override this default behavior by setting the ToolTipStyle property. For more information see the Properties section below.

Preview

The following image is a preview of the XamDataChart control renders with the ItemToolTipLayer added.

Item Tooltip Layer 1.png

Properties

Item tooltip layer summary

The following table summarizes the properties of the ItemToolTipLayer layer.

Property Name Property Type Description

Series

This property specifies which series should have an enabled item tooltip layer.

It is possible to create a separate item tooltip layer for each series and configure them individually.

Style

This property specifies a style to apply to the displayed tooltip. By default, the tooltip inherits its style from the chart, but setting this property will override this default setting.

Style

This property specifies a style to apply to the pointer area of the tooltip.

bool

This property specifies if the tooltip’s x position should be interpolated rather than snapping to the gridlines or the center spaces.

Example

Example

The following screenshot demonstrates how the XamDataChart control with the TargetSeries property of the ItemToolTipLayer object looks as a result of the following setting:

Property Value

series1
Item Tooltip Layer 2.png

Following is the code used in this implementation

In XAML:

<ig:XamDataChart x:Name="theChart" Margin="5,0,5,0" >
   <ig:XamDataChart.Axes>
      <ig:CategoryXAxis x:Name="xmCategoryXAxis"
                        ItemsSource="{StaticResource CategoryData1}"
                        Label="{}{Category}">
        <ig:CategoryXAxis.LabelSettings>
           <ig:AxisLabelSettings x:Name="xmCategoryXAxisLabel" Extent="25" VerticalAlignment="Bottom" FontSize="11" />
           </ig:CategoryXAxis.LabelSettings>
        </ig:CategoryXAxis>
        <ig:NumericYAxis x:Name="xmNumericYAxis1">
           <ig:NumericYAxis.LabelSettings>
              <ig:AxisLabelSettings x:Name="xmNumericYAxisLabel" Extent="50" Location="OutsideLeft" />
              </ig:NumericYAxis.LabelSettings>
           </ig:NumericYAxis>
        </ig:XamDataChart.Axes>
        <ig:XamDataChart.Series>
           <ig:ColumnSeries x:Name="series1"
                            ItemsSource="{StaticResource CategoryData1}"
                            ValueMemberPath="Value"
                            XAxis="{Binding ElementName=xmCategoryXAxis}"
                            YAxis="{Binding ElementName=xmNumericYAxis1}">
              <ig:ColumnSeries.ToolTip>
                 <TextBlock Text="{Binding Item.Value}" />
              </ig:ColumnSeries.ToolTip>
           </ig:ColumnSeries>
           <ig:LineSeries ItemsSource="{StaticResource CategoryData2}"
                          ValueMemberPath="Value"
                          XAxis="{Binding ElementName=xmCategoryXAxis}"
                          YAxis="{Binding ElementName=xmNumericYAxis1}">
            <ig:LineSeries.ToolTip>
               <TextBlock Text="{Binding Item.Value}" />
            </ig:LineSeries.ToolTip>
         </ig:LineSeries>
         <ig:ItemToolTipLayer
                 TargetSeries="{Binding ElementName=series1}"
         />
   </ig:XamDataChart.Series>
</ig:XamDataChart>

In C#:

var itemToolTipLayerSeries = new ItemToolTipLayer();
itemToolTipLayerSeries.TargetSeries = series1;
chart.Series.Add(itemToolTipLayerSeries);

Related Content

Topic Purpose

This topic provides information about the properties and methods that the hover interaction feature uses for highlighting, hovering and interacting with the tooltip interactions inherited from the Series class.

This topic provides information about the crosshair layer used for hover interactions. It describes the properties of the crosshair layer and provides an implementation example.

This topic provides information about the category highlight layer which is used for hover interactions. It describes the properties of the category highlight layer and provides an example of its implementation.

This topic provides information about the category item highlight layer used for hover interactions. It describes the properties of the category item highlight layer and provides an example of its implementation.

This topic provides information about the category tooltip layer used for hover interactions. It describes the properties of the category tooltip layer and provides an example of its implementation.