CursorOptions class (Graph)

CursorOptions()

new CursorOptions()

The CursorOptions object defines the configuration options to display crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes. The Cursor property is used to configure the behavior and appearance of the chart's cursor. It allows showing or hiding the cursor, displaying crosshair lines over the X (category) and Y (value) axes, enabling tooltips for nearby series data or axes, controlling specific X and Y line visibility for XY-type charts, and setting the smooth transition time for cursor movement between positions.

For instance, the "visible" option:

cursor: { visible: true }
shows the cursor (crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes)

The Cursor property must be assigned as an object (e.g., Cursor = { visible: true }) rather than setting individual attributes directly (like Cursor.visible = true), because the object is not directly mutable. When you assign a new object, the update is cumulative: only the fields you specify are changed, while previously set options remain unchanged, like in the following sample:

Cursor = { visible: true }; Cursor = { showCursorValueLine: false };

After this, the visible field remains true, allowing you to gradually update cursor settings without overwriting the existing configuration.

Members

(static) showCursorCategoryLine :Graph.ShowCursorCategoryLineEnum

The showCursorCategoryLine field specifies flags that control whether the vertical or horizontal category line is displayed when the crosshair cursor hovers over the chart. The category line extends from the category axis to the value axis and indicates the category currently under the cursor. The showCursorSerieTooltip field defines the flags to show the tooltips, when the crosshair cursor hovers the charts of the series.

The category-line is shown according to the following rules:

  • if the chart is shown horizontally (Serie.Vertical is false, default), the category-line is vertical
  • if the chart is shown vertically (Serie.Vertical is true), the category-line is horizontal

The Serie.Vertical property specifies whether the chart is shown vertically or horizontally.

The shapes field defines the visual-appearance for different parts of the control as explained:

  • "cursorLine" part defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area
  • "cursorCategoryAxisTooltip", defines the visual-appearance to show the tooltip on the category-axes, when the crosshair hovers the category-units
Type:
Example
null {null}, no vertical/horizontal category-line is shown
"near" {string} or 1 {number}, the vertical/horizontal category-line is shown when the pointer is near the category
showCursorCategoryLine

(static) showCursorSerieTooltip :Graph.ShowCursorSerieTooltipEnum

The showCursorSerieTooltip field defines the flags to show the tooltips, when the crosshair cursor hovers the charts of the series. The showCursorValueLine field shows or hides the horizontal/vertical value-line, when the crosshair cursor hovers the chart. The showCursorCategoryLine field specifies the flags to show the vertical/horizontal category-line, when the crosshair cursor hovers the chart.

The shapes field defines the visual-appearance for different parts of the control as explained:

  • "cursorSerieTooltip", defines the visual-appearance to show the tooltip when the crosshair cursor hovers the charts of the series
Type:
Example
null {null}, no tooltip is displayed when the crosshair cursor hovers the chart
"near" {string} or 1 {number}, the vertical/horizontal category-line indicates the series whose tooltip is displayed, when the crosshair cursor hovers the chart (default)
showCursorSerieTooltip

(static) showCursorValueLine :boolean

The showCursorValueLine field specifies whether the horizontal or vertical value line is displayed when the crosshair cursor hovers the chart. The cursorFormat field of the ValueAxisOptions object defines the format expression used to customize the tooltip shown on the value axis when the crosshair cursor hovers the chart, and can also be used to hide the tooltip displayed on the value axis.

The value-line is shown according to the following rules:

  • if the chart is shown horizontally (Serie.Vertical is false, default), the value-line is horizontal
  • if the chart is shown vertically (Serie.Vertical is true), the value-line is vertical

The Serie.Vertical property specifies whether the chart is shown vertically or horizontally.

The shapes field defines the visual-appearance for different parts of the control as explained:

  • "cursorLine" part defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area
  • "cursorValueAxisTooltip", defines the visual-appearance to show the tooltip on the value-axes, when the crosshair hovers the value-unit
Type:
  • boolean
Example
null {null}, the horizontal/vertical value-line is shown
false {boolean}, the horizontal/vertical value-line is hidden
true {boolean}, the horizontal/vertical value-line is shown when the pointer hovers the chart
showCursorValueLine

(static) showCursorXLine :boolean

The showCursorXLine field shows or hides the vertical y-line, when the crosshair cursor hovers the chart (available for xy-chart types only). The showCursorYLine field shows or hides the horizontal x-line, when the crosshair cursor hovers the chart (available for xy-chart types only)

The xy-chart types are:

  • "scatter", a scatter chart (also called scatter plot) is a type of chart that uses Cartesian coordinates to display values for typically two variables for a set of data.
  • "scatterLine", a scatter line chart is similar with "scatter" type, excepts that lines are shown between scatter plots
  • "scatterarea", a scatter area chart is similar with "scatterLine" type, excepts that scatter plots zone is filled
  • "bubble", a bubble chart or bubble plot is a type of chart that displays three dimensions of data (a bubble chart is an extension of the scatter plot used to look at relationships between three numeric variables)

The shapes field defines the visual-appearance for different parts of the control as explained:

  • "cursorLine" part defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area
  • "cursorXAxisTooltip", defines the visual-appearance to show the tooltip on the x-axes, when the crosshair hovers the value-unit (available for xy-chart types)
Type:
  • boolean
Example
null {null}, the vertical y-line is shown
false {boolean}, the vertical y-line is hidden
true {boolean}, the vertical y-line is shown when the pointer hovers the chart
showCursorXLine

(static) showCursorYLine :boolean

The showCursorYLine field shows or hides the horizontal x-line, when the crosshair cursor hovers the chart (available for xy-chart types only). The showCursorXLine field shows or hides the vertical y-line, when the crosshair cursor hovers the chart (available for xy-chart types only).

The xy-chart types are:

  • "scatter", a scatter chart (also called scatter plot) is a type of chart that uses Cartesian coordinates to display values for typically two variables for a set of data.
  • "scatterLine", a scatter line chart is similar with "scatter" type, excepts that lines are shown between scatter plots
  • "scatterarea", a scatter area chart is similar with "scatterLine" type, excepts that scatter plots zone is filled
  • "bubble", a bubble chart or bubble plot is a type of chart that displays three dimensions of data (a bubble chart is an extension of the scatter plot used to look at relationships between three numeric variables)

The shapes field defines the visual-appearance for different parts of the control as explained:

  • "cursorLine" part defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area
  • "cursorYAxisTooltip", defines the visual-appearance to show the tooltip on the y-axes, when the crosshair hovers the value-unit (available for xy-chart types)
Type:
  • boolean
Example
null {null}, the horizontal x-line is shown
false {boolean}, the horizontal x-line is hidden
true {boolean}, the horizontal x-line is shown when the pointer hovers the chart
showCursorYLine

(static) smooth :number

The smooth field defines the time in ms the cursor goes from one layout to another. The smooth-transition is performed when the cursor goes from one layout to another, such as when the cursor moves from one category to another, or from one value to another. The smooth-transition is performed for all cursor elements, including the crosshair lines and tooltips. By default, the smooth field is set to 62 ms, which provides a visually appealing transition effect. Setting the smooth field to 0 disables the smooth-transition, causing the cursor to jump immediately to the new position without any animation. Setting the smooth field to null makes the cursor inherit the smooth option of the control, allowing it to follow the global setting for smooth transitions defined at the control level. By default, the control's smooth option is set to 62 ms, but it can be customized to achieve the desired transition effect for the cursor across different layouts.
Type:
  • number
Example
null {null}, inherits the smooth option of the control
0 {number}, no smooth changes once the cursor goes from a layout to another
125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.
smooth

(static) visible :boolean

The visible field shows or hides the cursor (crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes). The "cursorLine" shape (shapes field) defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area. By default, the cursor is hidden (visible is null). Setting the visible field to true shows the crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes. Setting the visible field to false hides all these elements.
Type:
  • boolean
Example
null {null}, by default, the cursor is hidden
true {boolean}, shows the crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes
visible