Category Tooltip Layer

Topic Overview

Purpose

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.

Required background

The following topics are prerequisites to understanding this topic:

Topic	Purpose
Getting Started with Data Chart	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.
Category Series	This topic explains various types of Category Series in the XamDataChart control.

In this topic

This topic contains the following sections:

Overview
Preview
Properties
Example
Related Content

Overview

The CategoryToolTipLayer displays grouped tooltips for the series on the XamDataChart control using a category axis.

You can configure tooltips to target a specific axis. This can be done be setting the TargetAxis property. For more information on this property, see the Properties section below.

By default the grouped tooltips appear at the top of the XamDataChart control; however this default value can be overridden by setting the ToolTipPosition property. For more information on this property, see the CategoryToolTipLayer properties section below.

Preview

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

Properties

The following table summarizes the properties of the CategoryToolTipLayer layer.

Property Name	Property Type	Description
TargetAxis	`Axis`	This property specifies which axis should have an enabled category tooltip layer.
ToolTipStyle	`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 overrides this default setting.
UseInterpolation	`bool`	This property specifies if the tooltip’s x position should be interpolated rather than snapping to the gridlines or the center spaces.
ToolTipPosition	CategoryToolTipLayerPosition	This property specifies the location of the tooltip. It can be set to: Auto – A position is selected automatically OutsideStart - Displays at the outside start of the axis InsideStart - Displays at the inside start of the axis InsideEnd - Displays at the inside end of the axis OutsideEnd - Displays at the outside end of the axis

Example

The following screenshot illustrates how the XamDataChart control renders with the CategoryToolTipLayer object’s ToolTipPosition property configured with the following setting:

Property	Value
ToolTipPosition	`InsideStart`

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 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:CategoryToolTipLayer ToolTipPosition="InsideStart"
                               TransitionDuration="0:00:00.1"/>
   </ig:XamDataChart.Series>
</ig:XamDataChart>

In C#:

var catToolTipLayerSeries = new CategoryToolTipLayer();
catToolTipLayerSeries.ToolTipPosition = CategoryTooltipLayerPosition.InsideStart;
chart.Series.Add(catToolTipLayerSeries);