Crosshair

RadChartView provides a crosshair functionality through the ChartCrosshairBehavior class. This behavior display vertical and horizontal lines across the chart's plot area that intersect on the mouse position. The lines are following the mouse position.

The behavior also displays two labels (one for each line) which, by default, are moving along the axes, outside the plot area, following the lines.

You can add the crosshair behavior in the RadCartesianChart’s Behaviors collection. The following code snippet demonstrates a simple chart definition that includes ChartCrosshairBehavior and it recreates the visualization shown in the image above.

<telerik:RadCartesianChart> 
    <telerik:RadCartesianChart.VerticalAxis> 
        <telerik:LinearAxis /> 
    </telerik:RadCartesianChart.VerticalAxis>             
    <telerik:RadCartesianChart.HorizontalAxis> 
        <telerik:CategoricalAxis /> 
    </telerik:RadCartesianChart.HorizontalAxis> 
 
    <telerik:RadCartesianChart.Behaviors> 
        <telerik:ChartCrosshairBehavior /> 
    </telerik:RadCartesianChart.Behaviors> 
 
    <telerik:LineSeries> 
        <telerik:LineSeries.DataPoints> 
            <telerik:CategoricalDataPoint Category="Jan" Value="140" /> 
            <telerik:CategoricalDataPoint Category="Feb" Value="180" /> 
            <telerik:CategoricalDataPoint Category="Mar" Value="80" /> 
            <telerik:CategoricalDataPoint Category="Apr" Value="230" /> 
        </telerik:LineSeries.DataPoints> 
    </telerik:LineSeries> 
</telerik:RadCartesianChart> 

Properties

The crosshair behavior exposes the following properties:

• HorizontalLineLabelDefinition – gets or sets the LabelDefinition of the horizontal line of the crosshair
• VerticalLineLabelDefinition – gets or sets the LabelDefinition of the vertical line of the crosshair
• HorizontalLineLabelVisibility – gets or sets the Visibility of the horizontal line’s label
• VerticalLineLabelVisibility – gets or sets the Visibility of the vertical line’s label
• HorizontalLineStyle – gets (if manually set) or sets the Style of the horizontal line of the crosshair. The property accepts a value of type Style with TargetType set to Line
• VerticalLineStyle – gets (if manually set) or sets the Style of the vertical line of the crosshair. The property accepts a value of type Style with TargetType set to Line
• HorizontalLineVisibility – gets or sets the Visibility of the horizontal line
• VerticalLineVisibility – gets or sets the Visibility of the vertical line.
  

Events

The crosshair behavior exposes the following events:

• PositionChanged – it occurs when the position of the lines that represent the crosshair changes. The arguments of the event expose the following properties:
  • Data – an object of type Telerik.Charting.DataTuple. It holds the vertical and the horizontal value on the chart that corresponds to the crosshair position.
  • Position – an object of type Point. It holds the position of the mouse relative to the chart.

Find a runnable project of the previous example in the WPF Samples GitHub repository.

See Also

• ChartCrosshairBehavior
• ChartCrosshairPositionChangedEventArgs

• DataTuple

• LabelDefinition

• Axes