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 tap and holds that particular series.

The tooltip style is inherited from the chart.

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

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 4.png

Following is the code used in this implementation

<ig:XamDataChart x:Name="theChart">
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xAxis"
                          ItemsSource="{Binding CategoryData1}"
                          Label="Category"/>
        <ig:NumericYAxis x:Name="yAxis"/>
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:ColumnSeries x:Name="series1"
                         ItemsSource="{Binding CategoryData1}"
                         ValueMemberPath="Value"
                         XAxis="{x:Reference xAxis}"
                         YAxis="{x:Reference yAxis}">
            <ig:ColumnSeries.ToolTipTemplate>
                <DataTemplate>
                    <Label Text="{Binding Item.Value}" FontSize="12" />
                </DataTemplate>
            </ig:ColumnSeries.ToolTipTemplate>
        </ig:ColumnSeries>
        <ig:LineSeries ItemsSource="{Binding CategoryData2}"
                       ValueMemberPath="Value"
                       XAxis="{x:Reference xAxis}"
                       YAxis="{x:Reference yAxis}">
            <ig:LineSeries.ToolTipTemplate>
                <DataTemplate>
                    <Label Text="{Binding Item.Value}" FontSize="12" />
                </DataTemplate>
            </ig:LineSeries.ToolTipTemplate>
        </ig:Lineseries>

        <ig:ItemToolTipLayer TargetSeries="{x:Reference 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 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.