Telerik blogs

Hello everyone,

This blog post will demonstrate how to add location crosshair for RadChart as well as location indicator (achieved by two TextBlock-s that track the current mouse location).

To achieve the crosshair functionality you will add two custom gridlines to the ChartArea (each of them parallel to one of the axes). Also, you will need three events – MouseEnter, MouseLeave and MouseMove to track the mouse cursor position and “move” the gridlines across the plot area. By handling the MouseEnter and MouseLeave events you’ll change the visibility of the gridlines to Visible and Collapsed whenever the mouse cursor enters or leaves the bounds of the plot area .
The Mouse Move event handler in the code behind finds the current mouse position within the plot area. Note that you need to calculate the respective mouse coordinates relative to the plot area (represented by ClipPanel element in the ChartArea template) and not to the ChartArea itself. You can easily get hold of the panel via the ChildrenOfType<T> extension method (add reference to the Telerik.Windows.Controls namespace) like this:

  1. var plotAreaPanel = RadChart1.DefaultView.ChartArea.ChildrenOfType<ClipPanel>().FirstOrDefault();

Now that you have the correct mouse coordinates, you need to pass the information to the custom gridline elements as well. However, the gridlines expect and work with data units and not physical pixels so a transformation must be applied first. Each axis exposes ConvertPhysicalUnitsToData() method that can handle the actual conversion from physical pixels to data units. Note that if you need the same functionality on mouse click, you do not need to perform the conversion manually, as RadChart provides already converted values through the event arguments for the ChartArea.PlotAreaMouseLeftButtonDown / ChartArea.PlotAreaMouseLeftButtonUp events.

Knowing the current X and Y data values of the mouse cursor you can bind the pair of lines to the X and Y properties of their DataContext, ensuring that the two lines will intersect at the current mouse location.

  1. private void PlotArea_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
  2.         {
  3.             var plotAreaPanel = sender as ClipPanel;
  4.             var position = e.GetPosition(plotAreaPanel);
  6.             var x = RadChart1.DefaultView.ChartArea.AxisX.ConvertPhysicalUnitsToData(position.X);
  7.             var y = RadChart1.DefaultView.ChartArea.AxisY.ConvertPhysicalUnitsToData(position.Y);
  9.             (this.DataContext as ViewModel).X = x;
  10.             (this.DataContext as ViewModel).Y = y;
  11.         }

The Location Indicator will inherit the PlotArea’s DataContext, allowing it to output the current location in the chart coordinate system.

  1. <StackPanel Orientation="Horizontal" Height="20" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,100,0">
  2.           <TextBlock Text="{Binding X, StringFormat=X: \\cf2 {0:N2\\cf2 }}" Width="50" Margin="0,0,15,0" />
  3.           <TextBlock Text="{Binding Y, StringFormat=Y: \\cf2 {0:N2\\cf2 }}" Width="50" />
  4.       </StackPanel>


You can download the full source code from here


Happy coding! Smile

About the Author

Manol Donev

Technical Lead,
WinCore Team

Related Posts


Comments are disabled in preview mode.