How to enable Crosshair and CrosshairLabel in the Chart?

Crosshair is an interactive feature in the Chart that displays horizontal and vertical lines along with ToolTip like labels in horizontal and vertical axes when mouse hovers over the chart area. Refer to Crosshair and Trackball for more information on crosshair and trackball features.

To enable crosshair, Visible property of the Crosshair should be enabled. To display the crosshair label in axis, Visible property of CrosshairLabel in the corresponding axis should be enabled. Crosshair label in horizontal axis displays the X value and vertical axis displays the Y value of the current mouse hover co-ordinate.

The following code example illustrates this.

    @(Html.EJ().Chart("container")
      .Crosshair(crosshair=>
        crosshair.Visible(true))
      .PrimaryXAxis(xAxis=>
        xAxis.CrosshairLabel(label=>
            label.Visible(true)
        ))
       . . . . . .
       . . . . . .
    )

The output of the above code displays the Chart similar to the following screenshot.

Sample Link: Crosshair