Version

Annotations and Interaction Layers

Purpose

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

Overview

Hover interactions summary

Internally, interactions are implemented through interaction layers which are series that are added to the series collection. These layers are dependent on the cursor position. Adding the interaction layers to the igFinancialChart 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 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 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 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 igFinancialChart control with multiple layers enabled.

financialchart jquery overlays.png

Types of Layers

Introduction

Currently there are 3 different hover interaction layers and 2 annotation layers available on the igFinancialChart control. Each of these interaction layers provides different hover and tooltip interactions that may be used individually or combined with one another providing powerful interactions.

Types of Layers

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

Layer Type Description Options

Crosshairs Layer

The Crosshairs Layer provides crossing lines that follow your cursor and meet at the actual value of every targeted series.

Category ToolTip Layer

The Category ToolTip Layer displays grouped tooltips for series using a category axis.

  • ToolTipType

  • NOTE: Set toolTipType option to "category".

Data ToolTip Layer

The Data ToolTip Layer is the default tooltip layer of the igFinancialChart and it displays grouped or individual tooltips with a {DataLegendName} inside.

  • The Data ToolTip Layer is highly configurable, as it contains nearly all of the configuration options as the {DataLegendName}. As such, it would not make sense to list all of its properties here. You can read about this tooltip layer here.

Item ToolTip Layer

The Item ToolTip Layer displays tooltips for all target series individually.

Final Value Layer

The Final Value Layer provides an annotation along the axis of the ending value displayed in a series.

Callout Layer

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

Value Layer

The Value Layer annotates different focal points of your data such as the minimum, maximum, or average values by drawing a dashed line at those calculated points.

Related Content

Topics

The following topics provide additional information related to this topic:

Topic Purpose

This topic provides a conceptual overview of the Financial Chart control.

View on GitHub