Crosshair

Overview

A crosshair is a pair of perpendicular lines (horizontal and vertical) that move when the mouse is moved. As a rule, there are also two labels displayed on the X- and Y-axes in the points where the axes are crossed by the crosshair lines. The crosshair allows the user to "hit" a particular data point and see some extra information about it.

Enabling / Disabling

The crosshair can be configured with the help of the crosshair() method.

By default the crosshair is disabled. To enable or disable it, use crosshair() with the true or false parameter:

// enable the crosshair
chart.crosshair(true);

Note: You can also hide a line or a label of the crosshair - see the Appearance and Labels sections.

In this sample the crosshair is enabled, and there are also buttons to disable and enable it:

Playground

Appearance

You can configure the appearance of the crosshair by adjusting its X- and Y-strokes: use the xStroke() and yStroke() methods.

Note: The null parameter allows you to hide a line or both lines of the crosshair (labels are still shown).

In the following sample the X-stroke is not displayed; the appearance of the Y-stroke is configured:

// configure the strokes of the crosshair
chart.crosshair().xStroke(null);
chart.crosshair().yStroke("#dd2c00", 1.5, "10 5", "round");

Playground

Labels

The crosshair has two labels, which are shown on the X- and Y-axes in the points where the axes are crossed by the crosshair lines. To configure these labels, use the xLabel() and yLabel() methods.

See the full list of the available settings: anychart.core.ui.CrosshairLabel

You can disable or enable a label or both labels by using the false or true parameter:

// disable the x-label
chart.crosshair().xLabel(false);

The text of the labels can be changed with the help of the format() method and formatting functions:

// set the text of the x-label using text formatter
chart.crosshair().xLabel().format("{%Value}");

// set the text of the y-label
chart.crosshair().yLabel().format(function() {
  return Math.round(this.value) + " $";
});

It is also possible to configure the appearance of the labels. For example, you can use fontColor() and background() to adjust the font color and background:

// configure the appearance of the y-label
chart.crosshair().yLabel().fontColor("#64b5f6");
chart.crosshair().yLabel().background({
  fill: "white",
  stroke: "#64b5f6"
});

In the sample below the Y-label is colored, its text changed, and the X-label is not displayed:

Playground

Binding to Axes

The crosshair can have multiple Y- and X-labels. If your chart has two or more Y-axes, by default the Y-label of the crosshair is shown on the first one (with the 0 index), and the same rule works with the X-label and multiple X-axes.

To bind the crosshair to an axis of your choice, specify the index of the axis by using the axisIndex() method. Combine it with xLabel() or yLabel().

In this sample there are two Y-axes, and the Y-label of the crosshair is bound to the second one, which is on the left:

/* bind the y-label of the crosshair
to the second y-axis */
chart.crosshair().yLabel().axisIndex(1);

Playground

Multiple Labels

If your chart has several Y- or X-axes and you want to have a crosshair label on all (or some) of them you need to create extra crosshair labels and bind them to proper axes:

// create an extra axes
chart.yAxis(1, {orientation: 'right'});
chart.xAxis(1, {orientation: 'top'});

// enable crosshair and create extra labels 
chart.crosshair().enabled(true);

chart.crosshair().yLabel(0).axisIndex(0);
chart.crosshair().yLabel(1).axisIndex(1);

chart.crosshair().xLabel(0).axisIndex(0);
chart.crosshair().xLabel(1).axisIndex(1);

// set custom label format
chart.crosshair().xLabel(1).format("Month: {%Value}");

Playground