SciChart.js provides a cursors / crosshairs behavior via the CursorModifier, available out of the box.

Besides common features which are inherited from the ChartModifierBase class, the CursorModifier allows to show or hide a crosshairs, axis labels and an optional tooltip on the chart.

Adding a CursorModifier to a Chart

A CursorModifier can be added to the sciChartSurface.chartModifiers collection to enable crosshair/cursor behavior. For example:

// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);

// Add CursorModifier behavior
const cursorModifier = new CursorModifier({
    crosshairStroke: "#ff6600",
    crosshairStrokeThickness: 1,
    tooltipContainerBackground: "#000",
    tooltipTextStroke: "#ff6600",
    showTooltip: true,
    axisLabelFill: "#b36200",
    axisLabelStroke: "#fff"
});
sciChartSurface.chartModifiers.add(cursorModifier);

This results in the following behavior:

Customizing the Cursor/Tooltip Appearance

Basic customisation of the cursor and tooltip appearance can be made through the following properties.

export class CursorModifier extends ChartModifierBase2D {
    /**
     * Gets or sets the crosshair line Stroke color as an HTML Color code
     */
    public crosshairStroke = "#228B22";
    /**
     * Gets or sets the crosshair line strokethickness
     */
    public crosshairStrokeThickness: number = 2;
    /**
     * Gets or sets the tooltip container background color as an HTML Color code
     */
    public tooltipContainerBackground: string = "#228B22";
    /**
     * Gets or sets the tooltip text color as an HTML Color code
     */
    public tooltipTextStroke: string = "#fff";
    /**
     * Gets or sets whether we should display the tooltip. Default is false
     */
    public showTooltip: boolean = false;
    /**
     * Gets or sets whether we should display axis labels. Default is true
     */
    public showAxisLabels: boolean = true;
    /**
     * Gets or sets the axis label text color as an HTML Color code
     */
    public axisLabelStroke: string = "#fff";
    /**
     * Gets or sets the axis label fill as an HTML Color code.
     */
    public axisLabelFill: string = "#228B22";
}

For example,

• The crosshair line thickness and stroke color can be changed with the crosshairStrokeThickness and crosshairStroke properties.
• Axis labels can be turned on/off via the showAxisLabels property.
• The tooltip can be turned on/off (to have a simple cursor) with the showTooltip property.
• Axis Label backgrounds and text color can be changed with the axisLabelStroke, axisLabelFill properties.
• The tooltip background and text color can be changed with the tooltipContainerBackground and tooltipTextStroke properties.
• Finally, deeper customisation of the tooltip can be achieved via the tooltipDataTemplate and tooltipSvgTemplate properties.

Customising the Tooltip

The Tooltip Content can be customised in the CursorModifier. There are two levels of this.  You can customise just the content for the tooltip, or you can supply your own svg to customise the appearance as well.

To customise the content, create a tooltipDataTemplate.  This is a function which takes an array of seriesInfo (which are the results of the hit-test) and returns an array of strings which are the lines that will appear in the tooltip.

const customTemplate: TCursorTooltipDataTemplate = (seriesInfos: SeriesInfo[], tooltipTitle: string) => {
        const valuesWithLabels: string[] = [];
        if (tooltipTitle) {
            valuesWithLabels.push(tooltipTitle);
        }
        seriesInfos.forEach((si, index) => {
            const xySeriesInfo = si as XySeriesInfo;
            valuesWithLabels.push(`X Value: ${xySeriesInfo.formattedXValue}`);
            valuesWithLabels.push(`Y Value: ${xySeriesInfo.formattedYValue}`);
        });
        return valuesWithLabels;
    }
sciChartSurface.chartModifiers.add(new CursorModifier({ showTooltip: true, tooltipDataTemplate: customTemplate });

The tooltipSvgTemplate property allows you to take complete control over the appearance and content of your tooltip.  If you do this, be aware that the default template includes some logic to measure and reposition the tooltip when you are close to the bottom right of the chart.  To retain this behaviour, call adjustTooltipPosition as shown in the example below. 

    const tooltipSvgTemplate: TCursorTooltipSvgTemplate = (
        seriesInfos: SeriesInfo[],
        svgAnnotation: CursorTooltipSvgAnnotation
    ): string => {
        const width = 120;
        const height = 120;
        const seriesInfo = seriesInfos[0];
        if (!seriesInfo?.isWithinDataBounds) {
            return "<svg></svg>";
        }
        const x = seriesInfo ? seriesInfo.formattedXValue : "";
        const y = seriesInfo ? seriesInfo.formattedYValue : "";
         // this calculates and sets svgAnnotation.xCoordShift and svgAnnotation.yCoordShift.  Do not set x1 or y1 at this point.
        adjustTooltipPosition(width, height, svgAnnotation);
        return `<svg width="${width}" height="${height}">
            <circle cx="50%" cy="50%" r="50%" fill="green"/>
            <svg width="100%">
                <text y="40" font-size="13" font-family="Verdana" dy="0" fill="white">
                    <tspan x="50%" text-anchor="middle" dy="1.2em">Some Title</tspan>
                    <tspan x="50%" text-anchor="middle" dy="1.2em">x: ${x} y: ${y}</tspan>
                </text>
                <image x="50%" y="10" width="25" height="25" transform="translate(-12.5,0)" xlink:href="/img/posture.png" />
            </svg>
        </svg>`;
    };

Getting tooltips for the nearest point only

By default, CursorModifier returns data for all series at the x-value the mouse is over, regardless of y-value.  If you want to only see information for the points that are near the cursor in both x and y, then set the hitTestRadius property to a non-zero value, either on the modifier instance, or in the constructor options.  This will cause it to report only on points that number of pixels away from the cursor.