This topic provides conceptual information about the hover interactions available on the igDataChart control including the different types of hover interaction layers available.
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).
This topic contains the following sections:
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 hover interaction layers to the igDataChart 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. Using a tooltip for a series in more than one location at once is not allowed.
The following screenshot displays the igDataChart control with the category highlight layer, the crosshair layer and the item tooltip layer implemented.
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 Hover Interactions Property Reference (igDataChart) topic.
Currently there are 5 different hover interaction layers available on the igDataChart 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.
The following summarizes the different types of layers available on the igDataChart control:
The crosshairLayer provides crossing lines that meet at the actual value of every targeted series.
For more information, see the Configuring the Crosshair Layer (igDataChart) topic.
The categoryHighlightLayer targets a category axis, or all category axes in the igDataChart control. They draw a shape that illuminates the area of the axis closest to the cursor position.
For more information, see the Configuring the Category Highlight Layer (igDataChart) 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.
For more information, see the Configuring the Category Item Highlight Layer (igDataChart) topic.
The categoryTooltipLayer displays grouped tooltips for series using a category axis.
For more information, see the Configuring the Category Tooltip Layer (igDataChart) topic.
The itemTooltipLayer displays tooltips for all target series individually.
For more information, see the Configuring the Item Tooltip Layer (igDataChart) topic.
The finalValueLayer displays annotations that represent the current (final) value of a series on the chart.
For more information, see the Configuring the Final Value Layer (igDataChart) topic.
The calloutLayer displays annotations from existing or new data on the chart.
For more information, see the Configuring the Callout Layer (igDataChart) topic.
Hover Interactions Overview (igDataChart): This topic provides conceptual information about the hover interactions available on the igDataChart control including the different types of hover interaction layers available.
Hover Interactions Property Reference (igDataChart): 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.
Configuring the Crosshair Layer (igDataChart): 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.
Configuring the Category Highlight Layer (igDataChart): 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.
Configuring the Category Item Highlight Layer (igDataChart): 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.
Configuring the Category Tooltip Layer (igDataChart): 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.
Configuring the Item Tooltip Layer (igDataChart): 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.
The following samples provide additional information related to this topic.
Hover Interactions – Crosshair Layer: This sample demonstrates the Crosshair Layer that provides crossing lines that meet at the actual value of every series that they are targeting. The sample options pane allows you to edit the properties of the layer, such as changing the thickness of the crosshair.
Hover Interactions – Category Highlight Layer: This sample demonstrates the Category Highlight Layer that targets a category axis, or all category axes in the igDataChart™ control. The sample options pane allows you to edit the properties of the Category Highlight Layer, such as changing the color of the highlight, outline, thickness and more.
Hover Interactions – Category Item Highlight Layer: This sample demonstrates the Category Item Highlight Layer that 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.The sample options pane allows you to edit the properties of the Category Item Highlight Layer, such as changing the color of the highlight, outline, thickness and more.
Hover Interactions – Category Tooltip Layer: This sample demonstrates the Category Tooltip Layer that displays grouped tooltips for series that use a category axis. The sample options pane allows you to edit the properties of the layer, such as changing the position of the tooltip.
Hover Interactions – Item Tooltip Layer: This sample demonstrates the Item Tooltip Layer that displays tooltips for all target series individually. The sample options pane allows you to edit the properties of the layer, such as changing the transition duration.
Hover Interactions – Multiple Layers: This sample demonstrates how multiple layers interact within the igDataChart control. This sample displays the Item Tooltip Layer, the Crosshair layer and the Category Highlight Layer.
View on GitHub