Example of Crosshair in React Chart Component

/
/
CrosshairChart

This sample depicts the crosshair behavior in the charts. To view the crosshair and its tooltip, hover over the chart or tap on it in touch-enabled devices.

More Details...

Loading....
Description

The crosshair is used to inspect or focus on an individual data point using a vertical and a horizontal line. You can enable the crosshair using the enable property in the chartCrosshairSettings class and customize its tooltip by using the chartAxisCrosshairTooltip in the axis.

The snapToData property snaps the crosshair to the nearest data point instead of following the exact mouse position, providing a more precise focus on data points.

Injecting Module

Chart component features are segregated into individual feature-wise modules. To use Crosshair, we need to inject Crosshair module into services.

More information on the Crosshair can be found in this documentation section.