Version

Chart Annotation Layers

Purpose

This topic provides conceptual information about the annotations and hover interactions available on the XamDataChart™ control including the different types of hover interaction layers available.

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

Hover interactions summary

Hover interactions are implemented through hover interaction layers which are series that are added to the series collection. These layers are dependent on the cursor position. Adding the cursor interaction layers to the XamDataChart control disables the default behavior of the crosshairs and/or tooltips (depending on which type of layer added).

The default behavior is disabled because it prevents visual confusion as the hover interaction layers perform a similar visual function compared to the built in behavior as the cursor moves. You can, however, override this behavior and allow the default crosshair functionality to perform in addition to the hover interaction layer functionality. Also of note, only target a series by one tooltip layer at a time. If you target more than one tooltip layer at a series, the hover interaction layers that use tooltips will not function as expected. This is due to the fact that series tooltips are UIElements and can only be attached to the visual tree in one place at a time. Using a tooltip for a series in more than one location at once is not allowed.

The following screenshot displays the XamDataChart control with the category highlight layer, the crosshair layer and the item tooltip layer implemented.

Hover InteractionsOverview 1.png

Common Properties

Common properties and methods overview

Since the hover interaction layers inherit from the Series object, they gain a lot of the properties and methods that are available on the Series base class. However, not everything from the Series class is meaningful for the hover interaction layers. For example, hover interaction layers are not designed to interact with the mouse and should not be hit testable; consequently they will not raise mouse related events.

For more information on the common properties and methods, see the Common Properties topic.

Types of Layers

Introduction

Currently there are 5 different hover interaction layers available on the XamDataChart control. Each of these hover interactions layers provides a different highlight, hover and tooltip interactions that may be used individually or combined with one another providing powerful hover interactions.

Types of Layers

The following table summarizes the different types of layers available on the XamDataChart control.

Layer Type Description

The CrosshairLayer provides crossing lines that meet at the actual value of every targeted series.

Hover InteractionsOverview 2.png

For more information, see the Crosshair Layer topic.

The CategoryHighlightLayer targets a category axis, or all category axes in the XamDataChart control. They draw a shape that illuminates the area of the axis closest to the cursor position.

Hover InteractionsOverview 3.png

For more information, see the Category Highlight Layer topic.

The CategoryItemHighlightLayer layer highlights items in a series that use a category axis either by drawing a banded shape at their position or by rendering a marker at their position.

Hover InteractionsOverview 4.png

For more information, see the Category Item Highlight Layer topic.

The CategoryToolTipLayer displays grouped tooltips for series using a category axis.

Hover InteractionsOverview 5.png

For more information, see the Category Tooltip Layer topic.

The DataToolTipLayer displays a visualization much like the XamDataLegend as you mouse over the different series of the chart.

For more information, see the Data Tooltip Layer topic.

The ItemToolTipLayer displays tooltips for all target series individually.

Hover InteractionsOverview 6.png

For more information, see the Item Tooltip Layer topic.

The FinalValueLayer provides an annotation along the axis of the ending value displayed in a series.

0

For more information, see the Final Value Layer topic.

The CalloutLayer displays a callout annotation at an X/Y position. It can show a label and some extra content on mouse-over.

The CalloutLayer supports all series types.

0

For more information, see the Callout Layer topic.

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.

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