Crosshairs Layer

The Crosshairs Layer renders a vertical and/or horizontal line where your pointer intersects with the data points on the igCategoryChart.

Options

Below is a list of options that can be used to configure the Crosshairs Layer.

Enabling the Crosshairs Layer

The Crosshairs Layer is enabled by setting the crosshairsDisplayMode option to either "horizontal", "vertical", or "both".

The code snippet below demonstrates how to enable both horizontal and vertical crosshairs for the igCategoryChart.

In HTML:

$(function () {
     $("chart1").igCategoryChart({
         crosshairsDisplayMode: "both"
     });
});

Configuring the Crosshairs Layer

Snap to Data

Setting the crosshairsSnapToData option to true will snap the crosshairs to your data points in the igCategoryChart. If set to false, the crosshair will interpolate between data points while hovering your pointer.

The code snippet below demonstrates how to enable crosshairs to snap to data points.

In HTML:

$(function () {
     $("chart1").igCategoryChart({
         crosshairsSnapToData: true
     });
});

Enable Axis Annotations

Enabling axis annotations for the Crosshairs Layer will render the crosshair's value as an annotation label in the axis.

The code snippet below demonstrates how to enable axis annotation for the Crosshair Layer.

In HTML:

$(function () {
     $("chart1").igCategoryChart({
         crosshairsAnnotationEnabled: true
     });
});

The following screenshot displays the igCategoryChart control using horizontal crosshairs with axis annotations.

Related Topics:

• Final Value Layer