Put vertical line at chart where nearest X value exists, when mouse button clicked

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

For example:

• The Hit-Test API
• The VerticalLineAnnotation / Annotations API
• Some caveats such as Transforming Coordinates in the viewport

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

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


public partial class HitTestToAddAnnotations : Window
{
    public HitTestToAddAnnotations()
    {
        InitializeComponent();
    }

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

        // Transform point to inner viewport 
        // https://www.scichart.com/questions/question/how-can-i-convert-xyaxis-value-to-chart-surface-coodinate
        // https://www.scichart.com/documentation/v5.x/Axis%20APIs%20-%20Convert%20Pixel%20to%20Data%20Coordinates.html
        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,
Andrew