Hover Interactions Property Reference (igDataChart)

Topic Overview

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.

Required background

The following topics are prerequisites to understanding this topic:

Adding igDataChart: This topic demonstrates how to add the igDataChart™ control to a page and bind it to data.
Binding igDataChart to Data: This topic explains how to bind the igDataChart™ control to various data sources (JavaScript array, IQueryable<T>, web service).

In this topic

This topic contains the following sections:

Overview

The hover interactions layers inherit those series base class properties and methods that are relevant in the context of hover interactions. For example, hover interactions, by design do not interact with the mouse, so they do not raise the mouse events. Also, the hover interaction layers do not display data directly, so methods such as scrollIntoView are not applicable for this feature.

Common Properties

The following table summarizes the series class properties inherited by the hover interaction classes.

Property Name	Property Type	Description
brush	brush	The hover interaction layers inherit their `brush` from the series with whom they are interacting. However, this can be overridden by setting the `brush` property directly.
outline	brush	This property follows the same guidelines as the `brush` property, listed above.
cursorPosition	point	This property specifies the world position to use instead of the default mouse position (NaN, NaN). When this property is set, it fixes the particular layer on the provided world position. Note: A world position contains x and y values which range from 0 to 1 representing the global position of the cursor relative to the entire ranges of the axes.
isDefaultCrosshairBehaviorDisabled	bool	This property specifies if the series default crosshair should be disabled when there is a hover interactions layer on the chart. The default value is True.
useIndex	bool	This property specifies if the hover interactions layer should use a series index and reserve a color in the Brushes collection that is assigned to the `igDataChart` control. The default value is False.
useLegend	bool	This property specifies if the hover interactions layer should appear in the legend. When this property is set to true, it also indexes the series as it is required to appear in the legend. In order be recognized in the ledgend you must assign a single color to the series. The default value is False.

Method Name	Method Parameter	Description
moveCursorPoint	point	This property allows you to simulate a cursor move.

Setting the Inherited Properties on a Crosshair Layer

Example

The following screenshot illustrates how the igDataChart control’s crosshairLayer looks using the following settings:

Property	Value
cursorPosition	0.55, 0.55
useLegend	True

Following is the code used in this implementation

In Javascript:

<script type="text/javascript">    $(function () {
        $("#chart").igDataChart({
            dataSource: data,
            axes: [{
                type: "categoryX",
                name: "NameAxis",
                label: "CountryName",
            }, {
                type: "numericY",
                name: "PopulationAxis",
            }],
            series: [            
            {
                type: "column",
                name: "2005Population",
                xAxis: "NameAxis",
                yAxis: "PopulationAxis",
                valueMemberPath: "Pop2005"
            },            
            {
                type: "line",
                name: "1995Population",
                xAxis: "NameAxis",
                yAxis: "PopulationAxis",
                valueMemberPath: "Pop1995"
            },            
            {
                type: "crosshairLayer",
                name: "crosshairLayer",
                title: "crosshair",
                useInterpolation: false,
                transitionDuration: 500,                
                useLegend: "true",                
                cursorPosition: {x:0.5 , y:0.5}
            }]
        });
    });
</script>

Ignite UI | Help Topics