crosshair

An object that specifies the appearance options of the chart crosshair.

Type:

Object

Crosshair is a pointer, which is represented by two mutually-crossing lines stretched over the entire chart plot. The crosshair helps you identify the values of the series points more precisely. When the crosshair is enabled, its center snaps to hovered points. To enable the crosshair, set the enabled option within the crosshair configuration object to true.

Use the crosshair configuration object to specify options for both of the crosshair lines. To set the options for the horizontal or vertical crosshair line individually, specify these options within the crosshair | horizontalLine or crosshair | verticalLine object correspondingly.

View Demo

Show Example:
jQuery

In this example, the horizontal and vertical crosshair lines have a different color and dash style. In addition, the opacity of both crosshair lines is changed to 0.8.


                                    

                                    

color

Specifies a color for the crosshair lines.

Type:

String

Default Value: '#f78119'

This option supports the following colors.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the crosshair lines are colored in deepskyblue.


                                    

                                    

dashStyle

Specifies a dash style for the crosshair lines.

Type:

String

Default Value: 'solid'
Accepted Values: 'solid'|'longDash'|'dash'|'dot'

The following values are available.

  • solid
    Displays solid, continuous lines.
  • longDash
    Displays lines using long dashes.
  • dash
    Displays lines using dashes.
  • dot
    Displays lines using dots.
  • Any combination of 'longDash', 'dash' and 'dot'
    Displays lines by repeating the specified combination. For instance, 'dashdotdash'.
Show Example:
jQuery

In this example, the crosshair lines are displayed in the longDashdot dash style.


                                    

                                    

enabled

Specifies whether to enable the crosshair or not.

Type:

Boolean

Default Value: false

Show Example:
jQuery

Toggle the check box below to enable/disable the chart crosshair.


                                    

                                    

horizontalLine

Specifies the appearance of the horizontal crosshair line.

Type:

Object

|

Boolean

Within this object you can specify the appearance of the horizontal crosshair line. If you need to change only the visibility of the line rather than the other options, you can assign true or false directly to the horizontalLine field.

Show Example:
jQuery

In this example, the horizontal crosshair line is colored in darkseagreen and displayed in the dashdot dash style. In addition, the opacity of this crosshair line is changed to 0.85.


                                    

                                    

label

Specifies the options of the crosshair labels.

Type:

Object

Crosshair labels indicate the argument and the value of the series point that the crosshair pointer currently focuses on. These labels use the chart axes to indicate the argument and the value on them.

There are two crosshair labels on a chart - one for each crosshair line. To specify the settings of both these labels, use the fields of the crosshair | label object. To specify these settings for each label individually, use the same fields within the crosshair | horizontalLine | label or crosshair | verticalLine | label object.

To make the crosshair labels visible, assign true to the label | visible field. Additionally, you can change the color of the label's background using the backgroundColor option and specify the font settings of the label's text using the font object.

opacity

Specifies the opacity of the crosshair lines.

Type:

Number

Default Value: undefined

Show Example:
jQuery

In this example, the crosshair lines are displayed with the opacity set to 0.8.


                                    

                                    

verticalLine

Specifies the appearance of the vertical crosshair line.

Type:

Object

|

Boolean

Within this object you can specify the appearance of the vertical crosshair line. If you need to change only the visibility of the line rather than the other options, you can assign true or false directly to the verticalLine field.

Show Example:
jQuery

In this example, the vertical crosshair line is colored in darkseagreen and displayed in the dashdot dash style. In addition, the opacity of this crosshair line is changed to 0.85.


                                    

                                    

width

Specifies the width of the crosshair lines.

Type:

Number

Default Value: 1

Show Example:
jQuery

In this example, the crosshair lines are displayed with a 3-pixel width.