Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Crosshair Layer

Topic Overview

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.

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

Crosshair layer overview

The CrosshairLayer renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines.

You can configure the CrosshairLayer so that the layer will only display one specific series as by default they target all series on the XamDataChart control. To achieve this, set the TargetSeries property. For more information on this property, see the Properties section below.

By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the Brush property. For more information on this property see the Common Properties topic.

Preview

The following image is a preview of the XamDataChart control rendered with the CrosshairLayer added.

Crosshair Layer 1.png

Properties

Crosshair layer properties

The following table summarizes the properties of the crosshair layer.

Property Name Property Type Description

Visibility

This property specifies if the horizontal line of the crosshair layer should be visible.

Visibility

This property specifies if the vertical line of the crosshair layer should be visible.

Series

This property specifies which series should have an enabled crosshair layer.

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

bool

This property specifies if the vertical crosshair should cross the series at an interpolated position between data points. Usually the crosshair layer finds the closest point in a series and ensures that the crosshairs meet at that point, however if the points are sparse then you should enable this property.

bool

This property specifies whether to draw annotations over the axes where the crosshair meets with them.

Example

Example

The following screenshot illustrates how the XamDataChart control with the TargetSeries property of the CrosshairLayer object looks configured using the following setting:

Property Value

series1
Crosshair Layer 2.png

Following is the code used in this implementation

In XAML:

<ig:CrosshairLayer
   TargetSeries="{Binding ElementName=series1}"
/>

In C#:

var crosshairLayerSeries = new CrossHairLightLayer();
crosshairLayerSeries.TargetSeries = series1;
chart.Series.Add(crosshairLayerSeries);

In Visual Basic:

Dim crosshairLayerSeries As new CrossHairLightLayer()
crosshairLayerSeries.TargetSeries = series1
chart.Series.Add(crosshairLayerSeries)

Related Content

Topic Purpose

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

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