Cross hair and track ball in JavaScript Chart control

18 Nov 20181 minute to read

The crosshair feature displays vertical and horizontal guide lines that intersect at the mouse or touch position, helping to identify the corresponding axis values precisely.

Crosshair lines can be enabled by setting the enable property in the crosshair settings.

Tooltip for axis

Axis tooltip labels can be enabled by setting the enable property of crosshairTooltip in the corresponding axis. This tooltip displays the current axis value at the crosshair position.

Customization

The fill and textStyle properties of crosshairTooltip are used to customize the background color and font style of the crosshair label.

The color and width of the crosshair lines can be customized by using the line property in the crosshair settings.

Note: To use the crosshair feature, inject Crosshair module Chart.Inject(Crosshair) method.

Snap to data

By enabling the snapToData property, the crosshair snaps to the nearest data point instead of following the exact mouse position. This improves accuracy when inspecting values.

Trackball

The trackball feature tracks the data point closest to the mouse or touch position. A trackball marker highlights the nearest point, and the trackball tooltip displays detailed information about that point.

To use the trackball feature, inject both Crosshair and Tooltip into the provide.

Trackball functionality can be enabled by setting the enable property of the crosshair to true and the shared property of the tooltip to true.

Crosshair highlight

The highlightCategory property highlights the background of the entire category when the crosshair is moved over the chart.

The crosshair line color can be customized using the color property within the line configuration.

Crosshair label customization

The crosshairLabelRender event fires before each crosshair axis label is rendered, allowing you to customize the label’s appearance or content, or to prevent it from being displayed.

Event arguments:

  • text – The label text that can be modified.
  • value – The data value at the crosshair position.
  • axisName – The axis identifier (e.g., primaryXAxis).
  • axisOrientation – Either Horizontal or Vertical.
  • textStyle – Font properties for customization.
  • fill – Background color of the label.
  • cancel – Set to true to skip rendering the label.