SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


I want to put one vertical line to chart, when mouse left button click inside the chart.
And, I want to put vertical line where nearest plotted X value to mouse cursor location in the chart.
No interpolation.

  • Also, I’m using RubberBandXyZoomModifier ExecuteOn=”MouseLeftButton”

  • ZoomPanModifier ExecuteOn=”MouseRigthButton”

What is the best Modifier to use?
And how can it set like that?

  • You must to post comments
Best Answer

To place a vertical line at the mouse point, you need to use a few APIs in SciChart together.

For example:

Putting it all together I’ve created an example at our Github repository.

<s:SciChartSurface x:Name="scs" PreviewMouseDown="Scs_OnMouseDown">
        <s:NumericAxis AxisAlignment="Left"/>

public partial class HitTestToAddAnnotations : Window
    public HitTestToAddAnnotations()

    private void Scs_OnMouseDown(object sender, MouseButtonEventArgs e)
        // Get mouse point
        var mousePoint = e.GetPosition(scs);

        // Transform point to inner viewport 
        mousePoint = scs.RootGrid.TranslatePoint(mousePoint, scs.ModifierSurface);

        // Convert the mousePoint.X to x DataValue using axis
        var xDataValue = scs.XAxis.GetDataValue(mousePoint.X);

        // Create a vertical line annotation at the mouse point 
        scs.Annotations.Add(new VerticalLineAnnotation() { X1 = xDataValue});

Best regards,

  • Hiroyuki Seki
    Thank you for the sample code! I’ll try to modify this and use it.
  • Andrew Burnett-Thompson
    Great! Another way you could achieve the same thing is to override the VerticalSliceModifier.OnModifierMouseDown because in there you have access to charts and can do the above code.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.