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.
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.
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.
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.
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.
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.