JavaScript/jQuery Chart - crosshair.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:
Name Type Description
value

Date

|

Number

|

String

The raw argument value.

valueText

String

The formatted value converted to a string.

point

Point

The Point object.

Return Value:

String

The text for the crosshair label to display.

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
As an alternative to the function’s parameter you can use the this keyword.

font

Specifies font options for the crosshair labels.

Type:

Object

format

Formats a point value/argument before it is displayed in the crosshair label.

Type:

Format

Default Value: undefined

See the format section for details on accepted values.

See Also

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