Skip to main content

Crosshair/Combined Tooltip

Chart crosshair options and combined tooltips.

Introduction

The axis crosshair features provide a mechanism to analyze single or multiple data points with a shared x value. The combined tooltip is a related feature that summarizes the details of these multiple points that share an x value at a given pointer position. Crosshair options automatically enable combined tooltip in some scenarios.

Features

  • X crosshair with data snapping
  • Crosshair tick label box with callout
  • Y crosshair without data snapping
  • Y crosshairs that mark all y data points at given x position.
  • Combined tooltip with details for all points at a given x position.
Note: When the series setting mouseTracking.enabled=false is used, the series and points are not included in crosshairs or combined tooltips.

Crosshairs

The axis.crosshair property extends axisTick with two additional properties [enabled, snapToData] and specialized behavior that follows the pointer position.

Behaviors of X axis and Y axis crosshairs differs slightly. When the X axis crosshair is enabled, it sets a point focus state (point.focusGlow) on all points at the X axis crosshair position and enables a combined tooltip that summarizes the related points. This crosshair is also useful for highlighting the X axis tick labels at cursor position.

See the Pen Docs - X Crosshair & CTT by Arthur Puszynski (@jsblog) on CodePen.

The X axis crosshair snapToData option cannot be disabled.

The Y axis crosshair snapToData option can be disabled, however, when this option is used, the crosshair simply follows the pointer position and does not interact with the actual data points themselves.

See the Pen Docs - Y Crosshair Without snapToData by Arthur Puszynski (@jsblog) on CodePen.

When snapToData is true (default) it works in conjunction with the X axis crosshair and marks each point y value on the Y axis for a given x crosshair position with multiple color coded Y axis crosshairs.

See the Pen Docs - Y Crosshair With snapToData by Arthur Puszynski (@jsblog) on CodePen.

The combined tooltip is also not enabled automatically by default when this set of options are used because the individual data point values are shown on the Y axis.

Combined tooltip

Combined tooltip can be enabled with or without axis crosshairs. Without x crosshair enabled the result is similar to enabling x crosshair except the crosshair visual is not shown.

See the Pen Docs - Combined Tooltip Without Crosshairs by Arthur Puszynski (@jsblog) on CodePen.

The combined tooltip text template can be configured through the defaultTooltip.label.text property and uses 'point list tokens' reference . The %points token lists the individual point tooltips which are configured through the point.tooltip property.

Tip: A useful trick configuring combined tooltip text is to use the <span> tags with specific style width settings to create a grid of columns and rows.

See the Pen Docs - Combined Tooltip With Columns by Arthur Puszynski (@jsblog) on CodePen.