Crosshairs

sample image

Razor

@page "/Axes/Crosshairs"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.Measure;
@using LiveChartsCore.SkiaSharpView.Painting;
@using SkiaSharp;

<CartesianChart
    Series="@series"
    XAxes="@xAxes"
    YAxes="@yAxes">
</CartesianChart>

@code {
    private static double[] values = new double[] { 200, 558, 458, 249, 457, 339, 587 };
    private static Func<double, string> labelFormatter = value => value.ToString("N2");

    private ISeries[] series = new ISeries[]
    {
        new LineSeries<double> { Values = values }
    };

    private Axis xAxis;
    private Axis yAxis;
    private Axis[] xAxes;
    private Axis[] yAxes;

    public Crosshairs()
    {
        var crosshairColor = new SKColor(255, 0, 51);
        var crosshairBackground = new LiveChartsCore.Drawing.LvcColor(255, 0, 51);

        xAxis = new Axis
        {
            Name = "X Axis",
            CrosshairPaint = new SolidColorPaint(crosshairColor, 2),
            CrosshairLabelsPaint = new SolidColorPaint(SKColors.White),
            CrosshairLabelsBackground = crosshairBackground,
            CrosshairPadding = new LiveChartsCore.Drawing.Padding(6)
        };

        yAxis = new Axis
        {
            Name = "Y Axis",
            Labeler = labelFormatter,
            CrosshairPaint = new SolidColorPaint(crosshairColor, 2),
            CrosshairLabelsPaint = new SolidColorPaint(SKColors.White),
            CrosshairLabelsBackground = crosshairBackground,
            CrosshairPadding = new LiveChartsCore.Drawing.Padding(6),
            CrosshairSnapEnabled = true
        };

        xAxes = new[] { xAxis };
        yAxes = new[] { yAxis };
    }
}

Articles you might also find useful:

Cartesian chart control
Axes properties
Line series properties