Configures the crosshair labels.

Type: Object

Crosshair labels appear on the chart axes when a user pauses on a series point. They display the argument and the value of this series point.

DevExtreme HTML5 Charts CrosshairLabels

There are two crosshair labels on a chart - one for each crosshair line, and the label object described here configures both. If you need to set options individually for each label, use the label object within the crosshair.horizontalLine or crosshair.verticalLine object. Individual settings override common ones.

Because the crosshair labels are hidden by default, assign true to the label.visible field if you need them to be shown.


Paints the background of the crosshair labels.

Type: String
Default Value: '#f05b41'

This option supports the following colors.


Customizes the text displayed by the crosshair labels.

Type: function
Function parameters:
info: Object

Information about the point a user paused on.

Object structure:

The argument or the value of the point.

valueText: String

The argument or the value with an applied format and converted to string.

point: Point

The Point object.

Return Value: String

The text to be displayed in the crosshair labels.

Cannot be used in themes.

This option accepts a function that will be called twice on each point - once for the horizontal line, and then for the vertical. To specify an individual function, which will be called for the horizontal or vertical line separately, use the customizeText option within horizontalLine.label or verticalLine.label object.

The parameter of the customizeText function is mirrored by the this object.


Specifies font options for the crosshair labels.

Type: Object


Formats the point value/argument before it will be displayed in the crosshair label.

Type: Format
Default Value: undefined
DevExtreme widgets provide a wide choice of predefined formats. If you are, however, going to use custom formats, link the Globalize library to your project. Learn how to do this from topics in the Installation section.
See Also
  • format - provides a comprehensive overview of formatting capabilities.
  • Data Formatting - shows how to apply formatting to various widget elements.



Use the crosshair.label.format.precision option instead.

Specifies a precision for formatted values.

Type: Number
Default Value: undefined


Makes the crosshair labels visible. Applies only if the crosshair feature is enabled.

Type: Boolean
Default Value: false