label

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.

backgroundColor

Paints the background of the crosshair labels.

Type:

String

Default Value: '#f05b41'

This option supports the following colors.

customizeText

Customizes the text displayed by the crosshair labels.

Type:

function

Function parameters:
info:

Object

Information about the point a user paused on.

Object structure:
value:

Date

|

Number

|

String

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.

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

font

Specifies font options for the crosshair labels.

Type:

Object

format

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

Type:

Format

Default Value: undefined
NOTE
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 the Installation topic.
See Also
  • format - provides a comprehensive overview of formatting capabilities.
  • Data Formatting - shows how to apply formatting to various widget elements.

precision

Deprecated

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

Specifies a precision for formatted values.

Type:

Number

Default Value: undefined

visible

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

Type:

Boolean

Default Value: false